Как добавить несколько запросов таймера обратного отсчета на одной HTML-странице?

#javascript #html #countdowntimer

#javascript #HTML #countdowntimer

Вопрос:

Я хочу создать сайт онлайн-аукциона. Мне нужно указать время и дату окончания каждого аукциона.

Для этого я создал 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 />

Отображается ошибка в идентификаторе. Как это исправить?

1. Вы пробовали искать один, прежде чем пытаться изобретать велосипед?

2. Имеет ли каждый из ваших тегов <i> идентификатор =»обратный отсчет». Если это так, вы должны использовать класс. Вам нужен только 1 элемент, ссылающийся на идентификатор. Это также приведет к изменению вашего javascript -> getElementsByClass, который не поддерживается в ie8 и ниже.

3. Либо используйте class, либо сделайте этот мусор javascript функцией с параметром, где параметром является идентификатор тега <i> . Вам нужны разные идентификаторы для разных тегов <i> . Не забудьте вызвать функцию с соответствующим аргументом (идентификатором тега), когда документ будет готов.

Ответ №1:

Просто переместите свой код в одну функцию, которая принимает 2 параметра 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");

Вот скрипка для приведенного выше кода

Ответ №2:

Приведенный выше ответ работает, но я заметил, что второй таймер показывает, что он на час дольше, чем первый таймер.