HTML中定時倒計時是一個非常實用的功能,可以用于各種網站、應用和活動頁面。下面是一個簡單的HTML定時倒計時代碼,可以幫助您實現倒計時功能。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定時倒計時</title> </head> <body> <p>距離活動開始還有:</p> <p id="countdown"></p> <script> // 目標日期 var countDownDate = new Date("2022-01-01T00:00:00+08:00").getTime(); // 更新倒計時 var x = setInterval(function() { // 當前時間 var now = new Date().getTime(); // 剩余時間(毫秒) var distance = countDownDate - now; // 計算剩余天數、小時數、分鐘數和秒數 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 更新倒計時文本 document.getElementById("countdown").innerHTML = days + "天 " + hours + "小時 " + minutes + "分鐘 " + seconds + "秒 "; // 如果倒計時結束,清除定時器 if (distance< 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "活動已經開始!"; } }, 1000); </script> </body> </html>在上面的代碼中,使用了HTML中的
標簽來創建一個段落,用于顯示倒計時文本。通過JavaScript代碼,我們動態計算剩余時間,并更新到頁面上。 預處理標簽
用于指定預先格式化的文本,可以用于展示代碼或其他格式化的信息。在本例中,使用標簽來展示完整的HTML代碼,以便用戶快速復制并粘貼到自己的HTML文件中。 總之,這是一個簡單但實用的HTML定時倒計時代碼,可以幫助您實現各種網站、應用和活動頁面上的倒計時功能。