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 键盘keyCode键码值表
Dec 24 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
基于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中的日期处理方法集锦
2007/01/02 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js 调用百度分享功能
2017/02/27 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
原生JS实现天气预报
2020/06/16 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python Django使用forms来实现评论功能
2016/08/17 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python文件操作的简单方法总结
2019/11/07 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python实现低通滤波器代码
2020/02/26 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
英语故事演讲稿
2014/04/29 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
委托公证书格式
2015/01/26 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python