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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
小程序hover-class点击态效果实现
Feb 26 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 strtotime函数详解
2009/12/18 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
厂区绿化方案
2014/05/08 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
校运会通讯稿
2015/07/18 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Vue如何清空对象
2022/03/03 Vue.js