js实现倒计时60s_js倒计时60秒页面显示

博客小编 (78) 2024-07-07 17:01:03

通过Date()函数和Interval()函数结合水仙花数原理求时间动态变化实现时间减减倒计时

实现代码如下

<!DOCTYPE html>
<html>

<head>
  <title>倒计时示例</title>
</head>

<body>
  <div id="countdown"></div>

  <script>
    var countdownElement = document.getElementById('countdown');
    var endTime = new Date(); // 获取当前时间
    endTime.setHours(endTime.getHours() + 2); // 设置考试结束时间为2小时后

    function updateCountdown() {
      var now = new Date(); // 获取当前时间
      var timeDiff = endTime - now; // 计算剩余时间的毫秒数

      if (timeDiff <= 0) {
        clearInterval(timer); // 倒计时结束，清除定时器
        countdownElement.innerHTML = "考试时间结束!";
      } else {
        var hours = Math.floor(timeDiff / 3600000); // 计算剩余小时数
        var minutes = Math.floor((timeDiff % 3600000) / 60000); // 计算剩余分钟数
        var seconds = Math.floor((timeDiff % 60000) / 1000); // 计算剩余秒数

        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;

        var countdownDisplay = hours + ":" + minutes + ":" + seconds;
        countdownElement.innerHTML = "考试倒计时：" + countdownDisplay;
      }
    }

    updateCountdown(); // 首次调用更新倒计时
    var timer = setInterval(updateCountdown, 1000); // 每秒调用一次更新倒计时

  </script>
</body>

</html>