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

Posted zorasia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现十分钟倒计时代码实例相关的知识,希望对你有一定的参考价值。

编写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实现十分钟倒计时代码实例的主要内容,如果未能解决你的问题,请参考以下文章

纯js实现10分钟倒计时

python使用上下文对代码片段进行计时,非装饰器

jquery实现手机发送验证码的倒计时代码

求每天距下班时间倒计时JS代码

Js写的一个倒计时效果实例

微信图文中怎么做倒计时?