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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JS数组的赋值介绍
Mar 10 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
基于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防止sql注入代码实例
2013/12/18 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
Python实现的tab文件操作类分享
2014/11/20 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
什么是python类属性
2020/06/10 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
《小小的船》教学反思
2016/02/18 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电