我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果，就是多少秒之后注册这个按钮才可以点击，其目的就是强迫你去看他的注册注意事项，这是一个很实用的效果；另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果，这种倒计时效果是如何实现的呢？下面我们就用Js来实现一个倒计时效果，具体代码：
html页面：
<html> <head> <title>倒计时</title> <!--以下为css样式--> <style type= "text/css"> .daojishi h2 { font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; font-size:14px; margin-bottom:5px; color:#151515; } .daojishi #timer { font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; font-size:14px; color:#151515; font-weight:bold; } </style> <script type = "text/javascript" src = "timer.js"> </script> </head> <body onload = "timer()"> <div class = "daojishi"> <h2>剩余时间为：</h2> <div id = "timer"> </div> </div> </body> </html>
timer.js：
function timer() { var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数 dd = checkTime(dd); hh = checkTime(hh); mm = checkTime(mm); ss = checkTime(ss); document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒"; setInterval("timer()",1000); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; }
运行效果截图如下：
再来看看另一个JS倒计时效果：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>倒计时js代码</title> </head> <body> <DIV> <span>00天</span> <span>00时</span> <span>00分</span> <span>00秒</span> </DIV> <script type="text/javascript"> function getRTime(){ var EndTime= new Date('2016/05/1 10:00:00'); //截止时间 var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); /*var d=Math.floor(t/1000/60/60/24); t-=d*(1000*60*60*24); var h=Math.floor(t/1000/60/60); t-=h*60*60*1000; var m=Math.floor(t/1000/60); t-=m*60*1000; var s=Math.floor(t/1000);*/ var d=Math.floor(t/1000/60/60/24); var h=Math.floor(t/1000/60/60%24); var m=Math.floor(t/1000/60%60); var s=Math.floor(t/1000%60); document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "时"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; } setInterval(getRTime,1000); </script> </body> </html>
运行效果截图如下：
读者可以按照自己的喜好选择一款倒计时代码使用。