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=utf-8" />
<title>Jquery實現團購列表頁的多個倒計時</title>
<script language="javascript" src="jquery-1.8.3.min.js"></script>
<script language="javascript">
$(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).removeClass("settime");
alert($(this).attr("id"));
$(this).html("團購已經結束啦！");
}
});
setTimeout("updateEndTime()",1000);
}
</script>
</head>
<body>
<div id="1" class="settime" endTime="2015-08-12 12:01:01"></div>
可以寫在迴圈裡，只有保持跟上面的ID一致就可以啦
<div id="2" class="settime" endTime="2015-08-12 14:58:07"></div>
</body>
</html>