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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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抽象类用法实例分析
2015/07/07 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
javascript window对象属性整理
2009/10/24 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
php register_shutdown_function函数详解
2017/07/23 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python 消费 kafka 数据教程
2019/12/21 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
高中的自我鉴定
2013/12/16 职场文书
员工培训心得体会
2013/12/30 职场文书
营销总经理岗位职责
2014/02/02 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
产品质量保证书范本
2015/02/27 职场文书
学校德育工作总结2015
2015/05/11 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers