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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
详解react服务端渲染(同构)的方法
Sep 21 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP的面向对象编程
2006/10/09 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
python版学生管理系统
2018/01/10 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python通过实例讲解反射机制
2019/10/17 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
财务经理岗位职责
2013/11/09 职场文书
应聘自荐信
2013/12/14 职场文书
学生打架检讨书大全
2014/01/23 职场文书
会计专业自我鉴定
2014/02/10 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
十佳少年事迹材料
2014/12/25 职场文书
信仰观后感
2015/06/03 职场文书
八月迷情观后感
2015/06/11 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL