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的面向对象(二)
Nov 09 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
vue v-on监听事件详解
May 17 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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
thinkPHP查询方式小结
2016/01/09 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python入门篇之数字
2014/10/20 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
高中的自我鉴定
2013/12/16 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
信访工作个人总结
2015/03/03 职场文书
创卫工作总结2015
2015/04/22 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL