HTML2022跨年代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML2022跨年代碼</title>
</head>
<body>
<div id="countdown">
<h1>倒計時</h1>
<p id="days"></p>
<p id="hours"></p>
<p id="minutes"></p>
<p id="seconds"></p>
</div>
<script>
const countdown = () => {
const countdownDate = new Date("January 1, 2022 00:00:00").getTime();
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerHTML = days + " 天";
document.getElementById("hours").innerHTML = hours + " 小時";
document.getElementById("minutes").innerHTML = minutes + " 分鐘";
document.getElementById("seconds").innerHTML = seconds + " 秒";
if (distance < 0) {
clearInterval(interval);
document.getElementById("countdown").innerHTML = "<h1>新年快樂！</h1>";
}
}
const interval = setInterval(countdown, 1000);
</script>
</body>
</html>以上是HTML2022跨年倒計時的代碼。代碼使用JavaScript來計算時間差，并實時更新頁面上的倒計時。
在HTML中，我們使用了div標簽來包裹倒計時及結果。結果是通過使用p標簽和JavaScript動態生成的。
在JavaScript中，我們首先獲取了目標日期時間和當前日期時間，并計算它們的時間差。然后我們將時間差轉化為天、小時、分鐘和秒，最后將它們放入對應的p標簽中。
如果目標日期已經過去，我們清楚倒計時，然后將頁面上的內容替換成“新年快樂！”的h1標題。
這是一個十分簡單的跨年倒計時，但它仍需要HTML和JavaScript的配合。在未來的開發中，我們將能使用HTML2022的新特性和JavaScript新的語法來編寫更加強大和優秀的代碼。
上一篇jsp html css
下一篇html 選擇是否代碼