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关于select的相关操作说明
Jan 13 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
使用AOP改善javascript代码
May 01 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
公众号SVG动画交互实战代码
May 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JavaScript实现答题评分功能页面
2020/06/24 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python发送http请求解析返回json的实例
2018/03/26 Python
Python3中详解fabfile的编写
2018/06/24 Python
详解Python用户登录接口的方法
2019/04/17 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
Java如何格式化日期
2012/08/07 面试题
爱情保证书范文
2014/02/01 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
结婚周年感言
2014/02/24 职场文书
环保建议书作文
2014/03/12 职场文书
酒店员工培训方案
2014/06/02 职场文书
学校节能减排方案
2014/06/13 职场文书
廉政承诺书
2015/01/19 职场文书
中标通知书范本
2015/04/17 职场文书
安全教育第一课观后感
2015/06/17 职场文书
金榜题名主持词
2015/07/02 职场文书
改进工作作风心得体会
2016/01/23 职场文书