倒計時JavaScript的多個「時鐘」

我需要在一個頁面上創建多個倒計時時鐘。目前我只有一個，但我想使腳本更加美觀和緊湊，所以我想在日期中使用相同的計算，但只需簡單地通過一個不同的值。倒計時JavaScript的多個「時鐘」

一個時鐘倒數英聯邦運動會的開始。我需要另一個倒數關閉儀式。

腳本：

// set the date we're counting down to 
var target_date_opening = new Date("Jul 23, 2014").getTime(); 
var target_date_closing = new Date("Aug 23, 2014").getTime(); 

// variables for time units 
var days, hours, minutes, seconds; 

// get tag element 
var countdownOpening = document.getElementById("countdownOpening"); 
var countdownClosing = document.getElementById("countdownClosing"); 

// update the tag with id "countdownOpening" 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_opening - 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 
    countdownOpening.innerHTML = days + " days " + hours + " hours " 
    + minutes + " minutes " + seconds + " seconds"; 

}, 1000);

你可以看到我已經創造了新的變量來區分目標日期（target_date_closing）

我對innerHTML作爲countdownClosing的ID。

我的問題是使setInterval函數計算target_date_closing和輸出這是countdownClosing沒有複製腳本第二次。

我不知道是否需要存儲minutes，days，hours & seconds變量各個變量。

來源

2014-01-27 Francesca

嘗試

// set the date we're counting down to 
var target_date_opening = new Date("Jul 23, 2014").getTime(); 
var target_date_closing = new Date("Aug 23, 2014").getTime(); 

// variables for time units 
var days, hours, minutes, seconds; 

// get tag element 
var countdownOpening = document.getElementById("countdownOpening"); 
var countdownClosing = document.getElementById("countdownClosing"); 

// update the tag with id "countdownOpening" every 1 second 
setInterval(function() { 
    print(countdownOpening, target_date_opening) 
    print(countdownClosing, target_date_closing) 
}, 1000); 

function print(el, time) { 
    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (time - current_date)/1000; 

    // do some time calculations 
    var days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 

    var hours = parseInt(seconds_left/3600); 
    seconds_left = seconds_left % 3600; 

    var minutes = parseInt(seconds_left/60); 
    var seconds = parseInt(seconds_left % 60); 

    // format countdown string + set tag value 
    el.innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds"; 
}

演示：Fiddle

來源

2014-01-27 11:29:42

完美感謝您的幫助！ – Francesca

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script language="JavaScript"> 
     // set the date we're counting down to 
     var target_date_opening = new Date("2014-07-23").getTime(); 
     var target_date_closing = new Date("Aug 23, 2014").getTime(); 

     // variables for time units 
     var days, hours, minutes, seconds; 

     var showCountdown = function(elementID, dt) { 

      var elem = document.getElementById(elementID); 

      // update the tag with id "countdownOpening" every 1 second 
      setInterval(function() { 
       // find the amount of "seconds" between now and target 
       var current_date = new Date().getTime(); 
       var seconds_left = (dt - 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 
       elem.innerHTML = days + " days " + hours + " hours " 
         + minutes + " minutes " + seconds + " seconds"; 

      }, 1000); 

     }; 
    </script> 

</head> 
<body> 
<div id="countdownOpening"></div> 
<div id="countdownClosing"></div> 
    <script> 
     showCountdown('countdownOpening', target_date_opening); 
     showCountdown('countdownClosing', countdownClosing); 

    </script> 
</body> 
</html>

來源

2014-01-27 11:32:38 Tobi

倒計時JavaScript的多個「時鐘」

回答

相關問題