编写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实现十分钟倒计时代码实例
原文地址：https://www.cnblogs.com/zorasia/p/10012821.html