JS中动态输出考试时间倒计时Countdown时分秒变化(简易实现效果)

通过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>

实现效果如下

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值