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的12个网站推荐
Apr 28 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
Prototype框架详解
Nov 25 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 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开发文件系统实例讲解
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
vue中轮训器的使用
2019/01/27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
会计电算化个人求职信范文
2014/01/24 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
限期整改通知书
2015/04/22 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015年暑期见闻
2015/07/14 职场文书
校长新学期致辞
2015/07/30 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS