JavaScript的jQuery倒計時計時器

我想創建一個簡單的倒數計時器的日期/時間。JavaScript的jQuery倒計時計時器

我目前只具備以下天就要腳本是工作的罰款：

<div id="countdown"> 

today = new Date(); 
BigDay = new Date("March 29, 2013"); 
msPerDay = 24 * 60 * 60 * 1000 ; 
timeLeft = (BigDay.getTime() - today.getTime()); 
e_daysLeft = timeLeft/msPerDay; 
daysLeft = Math.floor(e_daysLeft); 
document.write(daysLeft + " days to go!"); 

</div>

我現在正試圖創建一個完整的倒數計時器（以小時，分鐘和秒），並創建了以下腳本。 html沒有顯示在頁面上。

var today = new Date(); 
var BigDay = new Date("29 03 2013, 14:30:00"); 
var msPerDay = 24 * 60 * 60 * 1000 ; 
var timeLeft = (BigDay.getTime() - today.getTime()); 
var e_daysLeft = timeLeft/msPerDay; 
var daysLeft = Math.floor(e_daysLeft); 
var e_hrsLeft = (e_daysLeft - daysLeft)*24; 
var hrsLeft = Math.floor(e_hrsLeft); 
var e_minsLeft = (e_hrsLeft - hrsLeft)*60; 
var minsLeft = Math.floor(e_minsLeft); 
var e_secsLeft = (e_minsLeft - minsLeft)*1000; 
var secsLeft = Math.floor(e_secsLeft); 
var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft; 

$('document').ready(function(){ 

window.setInterval(function(){ 
$('#countdown').html(timeString); 
}, 1000); 

});

我不確定問題可能是什麼。第一個腳本包含在html中，第二個腳本是外部js文件。

編輯：html現在顯示，但是所有值都顯示爲NaN。

來源

2013-03-14 Razzildinho

BTW，有一個在VAR minsLeft = Math.floor（（e_minsLeft）的額外開括號;什麼是您的控制檯說 – isotrope 2013-03-14 14:53:15

這提高了它現在它顯示HTML，但值分別顯示爲NaN – Razzildinho 2013-03-14 14:55:26

除了上述語法錯誤之外，還有邏輯錯誤，您需要計算超時函數內的剩餘時間字符串，否則這些值僅在頁面加載時計算。

$(function(){ 
    var BigDay = new Date("29 Mar 2013, 14:30:00"); 
    var msPerDay = 24 * 60 * 60 * 1000 ; 


    window.setInterval(function(){ 
     var today = new Date(); 
     var timeLeft = (BigDay.getTime() - today.getTime()); 

     var e_daysLeft = timeLeft/msPerDay; 
     var daysLeft = Math.floor(e_daysLeft); 

     var e_hrsLeft = (e_daysLeft - daysLeft)*24; 
     var hrsLeft = Math.floor(e_hrsLeft); 

     var e_minsLeft = (e_hrsLeft - hrsLeft)*60; 
     var minsLeft = Math.floor(e_minsLeft); 

     var e_secsLeft = (e_minsLeft - minsLeft)*60; 
     var secsLeft = Math.floor(e_secsLeft); 


     var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft; 
     $('#countdown').html(timeString); 
    }, 1000); 
})

演示：？Fiddle

來源

2013-03-14 14:59:21

完美謝謝 – Razzildinho 2013-03-14 15:03:30

是的，你需要計算setInterval裏面的時間 – 2013-03-14 15:04:05

還有另外一個問題，秒計算，你使用'（e_minsLeft - minsLeft）* 1000'實際上它應該是'（e_minsLeft - minsLeft）* 60' – 2013-03-14 15:05:11

您這裏有一個錯誤：var minsLeft = Math.floor((e_minsLeft);

第一個括號未閉合，應var minsLeft = Math.floor(e_minsLeft);

來源

2013-03-14 14:53:25 couzzi

固定謝謝 – Razzildinho 2013-03-14 14:58:02

因爲你沒有運行TIMESTRING計算每一秒讓你#countdown格中的文本會永不改變

來源

2013-03-14 14:53:57 xManh

所以整個功能需要在setInterval內嗎 – Razzildinho 2013-03-14 14:57:38

JavaScript的jQuery倒計時計時器

回答

相關問題