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 相关文章推荐
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
JS原生实现轮播图的几种方法
Mar 23 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中文件下载功能实现超详细流程分析
2012/06/13 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python字典get()方法用法分析
2015/04/17 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
手把手教你python实现SVM算法
2017/12/27 Python
python将视频转换为全字符视频
2019/04/26 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
纬创Java面试题笔试题
2014/10/02 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
求职简历的自我评价怎样写好
2013/10/07 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
老同学聚会感言
2014/02/23 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
投标邀请书范本
2015/02/02 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript