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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
说说Vuex的getters属性的具体用法
Apr 15 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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数据流应用的一个简单实例
2012/09/14 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
python中xrange和range的区别
2014/05/13 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
10条PHP编程习惯
2014/05/26 面试题
测试工程师程序员求职信范文
2014/02/20 职场文书
会务接待方案
2014/02/27 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2014司机年终工作总结
2014/12/05 职场文书
教师学期个人总结
2015/02/11 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers