html实现倒计时功能的代码怎么写

涛哥
Html代码

以下是使用HTML和JavaScript实现倒计时功能的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
  </head>
  <body>
    <h1>倒计时</h1>
    <p id="countdown"></p>
    
    <script>
      // 倒计时的截止日期（使用 Date 对象）
      var countDownDate = new Date("2023-12-31T23:59:59").getTime();
      
      // 每秒更新倒计时
      var countdownInterval = setInterval(function() {
        // 当前时间
        var now = new Date().getTime();
        
        // 剩余时间（单位毫秒）
        var timeLeft = countDownDate - now;
        
        // 计算天、小时、分钟和秒
        var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        
        // 将结果显示在页面上
        document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
        
        // 如果倒计时已经结束，清除倒计时函数
        if (timeLeft < 0) {
          clearInterval(countdownInterval);
          document.getElementById("countdown").innerHTML = "已结束！";
        }
      }, 1000); // 每秒执行一次
    </script>
  </body>
</html>

在上述代码中，我们使用了 JavaScript 中的 Date 对象来获取倒计时的截止日期，并且使用 setInterval() 函数每秒更新倒计时。然后，我们使用 Math.floor() 函数来计算剩余时间的天、小时、分钟和秒，并将结果显示在页面上。最后，如果倒计时已经结束，我们清除倒计时函数并将消息显示在页面上。

猜你喜欢：

php代码实现距离某个时间倒计时

用php代码实现倒计时功能及代码详解

 
  • 倒计时