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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
Javascript闭包实例详解
Nov 29 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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/13 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
js 页面输出值
2008/11/30 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
学习Django知识点分享
2019/09/11 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python发送邮件实现基础解析
2020/08/14 Python
python 实现Harris角点检测算法
2020/12/11 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
管理科学大学生求职信
2013/11/13 职场文书
教师实习自我鉴定
2013/12/18 职场文书
教师评优事迹材料
2014/01/10 职场文书
中学自我评价
2014/01/31 职场文书
一月红领巾广播稿
2014/02/11 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
培训通知
2015/04/17 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python