主页 / 网络编程 /

JS实现十分钟倒计时代码实例

网络编程 2021-07-04 16:46www.168986.cn编程入门
在本篇文章里我们给大家分享了关于JS实现十分钟倒计时的相关实例代码，有需要的朋友们可以学习下。

编写JS倒计时代码需要用到很多JavaScript知识，比如if函数，Math.floor，定时器setInterval等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。

举例10分钟考试倒计时，当时间仅剩五分钟时，提醒考试仅剩5分钟，时间结束时，提示考试结束。具体代码如下

HTML部分

<body>
 <div id="timer"></div>
 <div id="warring"></div>
</body>

JavaScript部分

<script type="text/javascript">
 var maxtime = 10  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>

JS十分钟倒计时代码的具体步骤

1、设置考试时长maxtime = 10 60秒，即10分钟

2、用if函数判断，当maxtime大于等于零时，判断剩余分和秒

3、再用if函数判断，当时间仅剩5分钟时，弹出提示距离结束仅剩5分钟

4、如果时间到，则清除定时器，提示结束

效果如图所示

上一篇：深入理解 Koa 框架中间件原理 下一篇：基于Vue实现可以拖拽的树形表格实例详解

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by