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动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
javascript实现tab切换特效
Nov 12 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
Vue中引入svg图标的两种方式
Jan 14 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python循环实现n的全排列功能
2019/09/16 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2014年科室工作总结
2014/11/20 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年防汛工作总结
2015/05/15 职场文书
教师节晚会主持词
2015/06/30 职场文书
健康教育主题班会
2015/08/14 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android