首页 >web前端 >js教程 >JS如何实现分钟倒计时（十分钟倒计时实例）

JS如何实现分钟倒计时（十分钟倒计时实例）

yulia原创: 2018-10-17 17:20:3021016浏览

工作中经常需要在页面中设置倒计时，那你知道JS如何实现分钟倒计时吗？这篇文章和大家分享一个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、如果时间到，则清除定时器，提示：结束

效果如图所示：

图片1.jpg

图片2.jpg

图片3.jpg

以上给大家分享了一个JS倒计时十分钟的代码，步骤很详细，容易理解，初学者可以自己动手尝试，看看能不能实现倒计时的效果，希望这篇文章对你有所帮助！

以上是JS如何实现分钟倒计时（十分钟倒计时实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：用javascript求两个字符串最大的相同的子串（代码实例）下一篇：浅谈ajax的缓存机制---IE浏览器方面

查看更多