下面是用JS中的日期函数和定时器完成的一个倒计时的例子,效果如图:
代码如下:
<!DOCTYPE html> <html> <head> <title>倒计时</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <input type="button" onclick="daojishi();" value="开始倒计时"/> <div id="daojishi"></div> </body> <script type="text/JavaScript"> function daojishi(){ //获取当前时间 var nowTime = new Date(); //获取活动结束时间,这里注意,月份是0-11 var EndTime = new Date(2018,05,11,15,24,0); //比较活动结束日期和当前时间 var chaTime = EndTime.getTime() - nowTime.getTime(); var nMS = 0; if (chaTime > 0){ nMS = chaTime; }if (chaTime == 0){ alert("活动时间到"); return; }else if(chaTime < 0){ alert("活动已过期"); return; } //floor() 方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。 var nD = Math.floor(nMS / (1000 * 60 * 60) / 24);//天 var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//时 var nM = Math.floor(nMS / (1000 * 60)) % 60;//分 var nS = Math.floor(nMS / 1000) % 60;//秒 if (nH < 10) { nH = '0' + nH; } if (nM < 10) { nM = '0' + nM; } if (nS < 10) { nS = '0' + nS; } document.getElementById("daojishi").innerHTML = "<span>"+nD+"</span>天<span>"+nH+"</span>时<span>"+nM+"</span>分<span>"+nS+"</span>秒"; //定时器 setTimeout(function() { daojishi(); }, 1000); } </script> </html>