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框架(iframe)操作总结
Apr 16 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
如何基于js判断浏览器版本
Feb 20 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python 音频生成器的实现示例
2019/12/24 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
高级电工工作职责
2013/11/21 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
网络技术专业推荐信
2014/02/20 职场文书
公司股权转让协议书
2014/04/12 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年新农合工作总结
2015/03/30 职场文书
开天辟地观后感
2015/06/09 职场文书
高中优秀作文(范文)
2019/08/15 职场文书