实现页面的多个倒计时效果 - 好文

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" /> <title>Jquery实现页面的多个倒计时</title> </head> <body> <
script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script
> <script> $(function(){ updateEndTime(); }); function updateEndTime(){ var
NowTime =new Date(); var time = NowTime.getTime(); $(".settime").each(function
(I){ var endDate =this.getAttribute("endTime"); //结束时间字符串 //转换为时间日期类型 var
endDate1 =eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) {
return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); var endTime =
endDate1.getTime();//结束时间毫秒数 var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数
if(lag > 0){ var second = Math.floor(lag % 60); var minite = Math.floor((lag /
60) % 60); var hour = Math.floor((lag / 3600) % 24); var day = Math.floor((lag /
3600) / 24); $(this).html(day+"天"+hour+"时"+minite+"分"+second+"秒"); }else{ $(this
).html("时间到了！！！"); } }); setTimeout("updateEndTime()",1000); } </script> <div
class="settime" endTime="2016-04-08 17:36:00"></div> 可以写在循环里，只要保持跟上面的ID一致就可以啦 <
div class="settime" endTime="2016-04-10 00:00:00"></div> </body> </html>
此为时分秒：：：<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"
></script> <script> $(function(){ updateEndTime(); }); function updateEndTime(){
var NowTime = new Date(); var time = NowTime.getTime(); $(".settime").each(
function(I){ var endDate =this.getAttribute("endTime"); var endDate1 = eval(
'new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt
(a,10) - 1; }).match(/\d+/g) + ')'); var endTime = endDate1.getTime(); var lag =
Math.floor((endTime - time) / 1000); if(lag > 0){var h = Math.floor(lag / 3600);
var d = Math.floor(h/24);var m = Math.floor(lag/60%60);var s = lag%60;$(this
).html(h +":"+m+":"+s); }else{ $(this).html("时间到"); }}); setTimeout(
"updateEndTime()",1000);} </script>
打赏作者：

热门工具换一换