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读取URL参数小例子
Aug 30 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
vue实现列表的添加点击
Dec 29 Javascript
js css自定义分页效果
Feb 24 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue elementUI表格控制对应列
Apr 13 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
动态生成gif格式的图像要注意?
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js opener的使用详解
2014/01/11 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
通过C++学习Python
2015/01/20 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
校领导推荐信
2013/11/01 职场文书
企业文化口号
2014/06/12 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
党员带头倡议书
2015/04/29 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL