JS如何实现分钟倒计时(十分钟倒计时实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

工作中经常需要在页面中设置倒计时,那你知道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、如果时间到,则清除定时器,提示:结束

效果如图所示:

JS如何实现分钟倒计时(十分钟倒计时实例)

JS如何实现分钟倒计时(十分钟倒计时实例)

JS如何实现分钟倒计时(十分钟倒计时实例)

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

【相关教程推荐】

1. JavaScript中文参考手册
2. JavaScript视频教程
3. bootstrap教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » JS如何实现分钟倒计时(十分钟倒计时实例)

发表评论

提供最优质的资源集合

立即查看 了解详情