码迷,mamicode.com
首页 > Web开发 > 详细

JS实现十分钟倒计时代码实例

时间:2018-11-24 19:00:01      阅读:590      评论:0      收藏:0      [点我收藏+]

标签:综合   article   app   开发流程   结束   red   ==   如图所示   小伙伴   

编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程。

举例:10分钟考试倒计时,当时间仅剩五分钟时,提醒考试仅剩5分钟,时间结束时,提示考试结束。具体代码如下:

HTML部分:

1
2
3
4
<body>
 <div id="timer"></div>
 <div id="warring"></div>
</body>

JavaScript部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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、如果时间到,则清除定时器,提示:结束

效果如图所示:

技术分享图片

技术分享图片

技术分享图片

     
技术分享图片 GPS车辆监控系统开发必备技术之WebGIS架构技术入门到实践
技术分享图片 深入浅出JavaScript入门到精通实战式教学视频全套教程  ...2
技术分享图片 老司机带你深入webpack原理与实战  ...23
技术分享图片 AngularJS的移动端解决方案,Ionic和AngularJS完美融合开发原生iOS或安卓App
技术分享图片 MUI APP全接触 MUI基础+交互原理深入解读MUI 开发APP视频教程
技术分享图片 AngularJS的移动端解决方案,Ionic和AngularJS完美融合开发原生iOS或安卓App
技术分享图片 Angular企业协作平台视频教程下载  ...2
技术分享图片 2017年Web前端开发整站模块化布局项目实战视频教程html5/CSS3/js
技术分享图片 基于 Vue.js 2.0 的 UI 组件库快速开发一个 Vue.js Web 应用 Element UI 视频教程  ...2
技术分享图片 vue.js2.0基于MVVM框架(Vuex+Vue Router+axios+jsonp+webpack 2.0+es6)全家桶技...  ...23
技术分享图片 2017年最权威的1000集大型web前端视频教程
技术分享图片 零基础轻松学好Bootstrap 兄弟连+云知梦+番茄课堂+其他Bootstrap 视频教程合集 技术分享图片
技术分享图片 基于Nodejs的Meteor全栈开发平台实时Web APP开发框架从零开始快速开一个Web APP应用
技术分享图片 NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战  ...2
技术分享图片 Node.js+Koa+ES6+Mongodb+Express实战移动网站及微信二网合一前后端项目  ...2
技术分享图片 Node+Express入门+进阶+实战(HTML5+AJAX+Node.js+Express的组合开发Web聊天应用)  ...2
技术分享图片 实例讲解基于 React+Redux 的前端开发流程
技术分享图片 React Native零基础入门到项目实战
技术分享图片 HTML5+Vue.js+Koa+zepto框架综合实战移动webAPP整站项目完整成型过程  ...2
技术分享图片 移动端开发框架Zepto.js真实案例带你入门+实战移动端商城Web APP

JS实现十分钟倒计时代码实例

标签:综合   article   app   开发流程   结束   red   ==   如图所示   小伙伴   

原文地址:https://www.cnblogs.com/zorasia/p/10012821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!