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的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
js的写法基础分析
Jan 17 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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 购物车的例子
2009/05/04 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript 日期常用的方法
2009/11/11 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python中requests模块的使用方法
2015/04/08 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python实现坦克大战
2020/04/24 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
Ajax的优点和缺点
2014/11/21 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
暑期实习鉴定
2013/12/16 职场文书
关于赌博的检讨书
2014/01/08 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
网站创业计划书
2014/04/30 职场文书
李敖北大演讲稿
2014/05/24 职场文书
给老婆的检讨书
2015/01/27 职场文书
MySQL普通表如何转换成分区表
2022/05/30 MySQL