最近做浏览器界面倒计时, 用 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="2018/3/17 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%24);
- m = Math.floor(leftTime/1000/60%60);
- s = Math.floor(leftTime/1000%60);
- }
- // 将 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>
运行结果:
来源: http://www.bubuko.com/infodetail-2499727.html