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


Posted in Javascript onOctober 18, 2018

编写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实现十分钟倒计时代码实例

Javascript 相关文章推荐
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
JavaScript的词法结构精华篇
Oct 17 #Javascript
Javascript中parseInt的正确使用方式
Oct 17 #Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 #Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 #Javascript
Vue绑定内联样式问题
Oct 17 #Javascript
react 应用多入口配置及实践总结
Oct 17 #Javascript
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
小小聊天室Python代码实现
2016/08/17 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python之循环结构
2019/01/15 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
社会实践自我鉴定
2013/11/07 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
学校招生宣传广告词
2014/03/19 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
企业文化标语大全
2014/06/10 职场文书
五年级下册复习计划
2015/01/19 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL