JavaScript 倒计时功能的两种实现方案

作者:木棉时间:2026-10-23 20:00:27浏览:223

本文介绍了JavaScript中实现倒计时的两种常用方法。第一种通过设定固定时长进行倒计时,适用于考试等场景;第二种基于目标时间戳计算剩余时间,常用于活动结束提醒。文章提供了完整的HTML与JS代码示例及运行效果说明,帮助开发者快速掌握倒计时功能的实现技巧。

JavaScript 倒计时功能概述

近期在进行浏览器界面开发时,需要实现倒计时功能,可以通过JavaScript轻松完成。主要包含两种实现思路:

基于固定时长的倒计时实现

第一种方法是设定一个固定的时长,然后从该时长开始倒数。这种模式常见于在线考试、限时操作等场景。

具体实现代码如下:


<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
      var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到,结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);
    </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>

运行后的效果如下:

JavaScript 倒计时功能概述

基于时间戳的倒计时实现

第二种方法是设定一个具体的目标时间戳,通过计算当前时间与目标时间的差值来进行倒计时。这种方式适用于活动结束提醒、促销倒计时等场景。

相关代码如下:


<html>
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var str="2017/5/17 00:00:00";
      var endDate = new Date(str);
      var end = endDate.getTime();

      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到div中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法,显示动态时间效果
      setTimeout(countTime,1000);

    }
  </script>
</head >
<body onload="countTime()" >
  <div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </div>
</body>
</html>

运行结果展示如下:

JavaScript 倒计时功能概述

以上内容即为JavaScript倒计时的两种实现方式,希望能对读者的学习或工作有所帮助,也欢迎持续关注本站获取更多技术分享。

作者最新文章