Jquery实现团购页面多个倒计时 【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>倒计时</title> <script type="text/javascript" src="jquery-1.3.2.js"></script>记得要导入js文件哦 <script> $(function(){ updateEndTime(); }); //倒计时函数 function updateEndTime() { var date = new Date(); var time = date.getTime(); //当前时间距1970年1月1日之间的毫秒数 $(".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> </head> <body> <div class="settime" endTime="2011-5-12 12:1:1"></div>可以写在循环里,只有保持跟上面的ID一致就可以啦 </body> </html>
🐳 作者:dupeng0811 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |