Обратный отсчет 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.

Моя проблема делает вычисление setInterval для target_date_closing, а вывод это countdownClosing без повторения сценария во второй раз.

Я не уверен, что если отдельные переменные необходимы для хранения minutes, days, hoursseconds & переменных.

источник

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 для нескольких «часов»

ответ

Смежные вопросы