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对象的比较
Feb 26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
WEEX环境搭建与入门详解
Oct 16 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
一个用于网络的工具函数库
2006/10/09 PHP
其他功能
2006/10/09 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
jQuery提交多个表单的小技巧
2014/07/27 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
javascript实现留言板功能
2020/02/08 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
js实现3D旋转效果
2020/08/18 Javascript
python实现ip查询示例
2014/03/26 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
2015年幼儿园毕业感言
2014/02/12 职场文书
治超工作实施方案
2014/05/04 职场文书
保护环境倡议书范文
2014/05/13 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
在Docker容器中部署SQL Server
2022/04/11 Servers