如何在同一個html頁面添加多個倒數計時器查詢？

Question

我想創建一個在線拍賣網站。我需要提及每個拍賣結束時間&的日期。

爲此，我創建了一個countdown.js文件是這樣的：

// set the date we're counting down to 
var target_date = new Date("Aug 15, 2014").getTime(); 
// variables for time units 
var days, hours, minutes, seconds; 
// get tag element 
var countdown = document.getElementById("countdown"); 
// update the tag with id "countdown" every 1 second 
setInterval(function() { 
    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 
    // do some time calculations 
    days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 
    hours = parseInt(seconds_left/3600); 
    seconds_left = seconds_left % 3600; 
    minutes = parseInt(seconds_left/60); 
    seconds = parseInt(seconds_left % 60); 
    // format countdown string + set tag value 
    countdown.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S"; 
}, 1000); 

而且我已經在我的HTML進口此如下：

<script type="text/javascript"src="js/countdown.js"></script> 
<p style="font-size:larger;color:Red;font-weight:bolder">END IN</p> 
        <h5><i id="countdown"></i></h5><br /> 

它的正常工作。現在我想在同一頁面添加一個或多個定時器。雖然我使用此代碼

<h5><i id="countdown"></i></h5><br /> 

它顯示ID中的錯誤。如何糾正這一點？

Answer 1

只需將您的代碼放入一個函數，它是接受2 PARAMS elementId和目標日期

function setTimer(elem_id, date) { 
// set the date we're counting down to 
var target_date = new Date(date).getTime(); 
// variables for time units 
var days, hours, minutes, seconds; 
// get tag element 

var countDownElem = document.getElementById(elem_id); 
//update the tag with id "countdown" every 1 second 
setInterval(function() { 
    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 
    // do some time calculations 
    days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 
    hours = parseInt(seconds_left/3600); 
    seconds_left = seconds_left % 3600; 
    minutes = parseInt(seconds_left/60); 
    seconds = parseInt(seconds_left % 60); 
    // format countdown string + set tag value 
    countDownElem.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S"; 
}, 1000); 
} 
setTimer("countdown1","Aug 15, 2014"); 
setTimer("countdown2","Aug 17, 2014"); 

這裏是fiddle上面的代碼

Answer 2

上述工程的答案，但我注意到了第二個定時器是顯示比第一次計時器長一個小時。