JavaScript 如何实现简单时分秒倒计时? 下面本篇文章给大家通过示例代码来介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
最近做浏览器界面倒计时, 用 JS 就实现, 两种方式:
一: 设置时长, 进行倒计时. 比如考试时间等等
代码如下:
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 简单时长倒计时 </title>
- <script type="text/javascript">
- var maxtime = 60 * 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>
- </head>
- <body>
- <div id="timer" style="color:red"></div>
- <div id="warring" style="color:red"></div>
- </body>
- </HTML>
运行结果:
二: 设置时间戳, 进行倒计时. 比如距离活动结束时间等等
代码如下:
<HTML> <head> <meta charset="UTF-8"> <title>JS 简单时分秒倒计时 </title> <script type="text/javascript"> function countTime() { // 获取当前时间 var date = new Date(); var now = date.getTime(); // 设置截止时间 var str="2020/3/30 00:00:00"; var endDate = new Date(str); var end = endDate.getTime(); // 时间差 var leftTime = end-now; // 定义变量 d,h,m,s 保存倒计时的时间 var d,h,m,s; if (leftTime>=0) { d = Math.floor(leftTime/1000/60/60/24); h = Math.floor(leftTime/1000/60/60$); m = Math.floor(leftTime/1000/60`); s = Math.floor(leftTime/1000`); } // 将 0-9 的数字前面加上 0, 例 1 变为 01 d = checkTime(d); h = checkTime(h); m = checkTime(m); s = checkTime(s); function checkTime(i){ if (i<10) { i = "0"+i; } return i; } // 将倒计时赋值到 div 中 document.getElementById("_d").innerHTML = d+"天"; document.getElementById("_h").innerHTML = h+"时"; document.getElementById("_m").innerHTML = m+"分"; document.getElementById("_s").innerHTML = s+"秒"; // 递归每秒调用 countTime 方法, 显示动态时间效果 setTimeout(countTime,1000); } </script> </head> <body onload="countTime()"> <div> <span id="_d">00</span> <span id="_h">00</span> <span id="_m">00</span> <span id="_s">00</span> </div> </body> </HTML>
运行结果:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17560.html