经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
JS实现十分钟倒计时代码实例
来源:jb51  时间:2018/10/19 8:55:39  对本文有异议

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

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

HTML部分:

  1. <body>
  2. <div id="timer"></div>
  3. <div id="warring"></div>
  4. </body>

JavaScript部分:

  1. <script type="text/javascript">
  2. var maxtime = 10 * 60; //
  3. function CountDown() {
  4. if (maxtime >= 0) {
  5. minutes = Math.floor(maxtime / 60);
  6. seconds = Math.floor(maxtime % 60);
  7. msg = "距离结束还有" + minutes + "分" + seconds + "秒";
  8. document.all["timer"].innerHTML = msg;
  9. if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
  10. --maxtime;
  11. } else{
  12. clearInterval(timer);
  13. alert("时间到,结束!");
  14. }
  15. }
  16. timer = setInterval("CountDown()", 1000);
  17. </script>

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

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

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

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

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

效果如图所示:

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号