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插件开发全解析
Oct 10 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 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注入点构造代码
2008/06/14 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS中数组重排序方法
2016/11/11 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python autoescape标签用法解析
2020/01/17 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
护士自荐信怎么写
2015/03/06 职场文书
交通事故代理词范文
2015/05/23 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python