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 私有成员分析
Jan 13 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
Validform表单验证总结篇
Oct 31 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue语法自动转typescript(解放双手)
Sep 18 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
使用Python生成XML的方法实例
2017/03/21 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
员工培训邀请函
2014/01/11 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
材料加工工程求职信
2014/02/19 职场文书
安全月活动总结
2014/05/05 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android