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 Event事件学习第一章 Event介绍
Feb 07 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
js数组常用最重要的方法
Feb 04 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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 htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Django发送html邮件的方法
2015/05/26 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
小学教师师德感言
2014/02/10 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
新员工入职欢迎词
2015/01/23 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
教师素质教育心得体会
2016/01/19 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers