Блог

Я хочу использовать его для нескольких элементов HTML, но мне не повезло, например, иметь 2-й элемент, который отсчитывает время до другого времени

Потому что я пытался изменить все имена переменных во 2-м скрипте (копия скрипта с измененным идентификатором элемента HTML, измененными именами переменных и функций), и он не давал никаких результатов.

Это оно

 (function() {
  var start = new Date;
  start.setHours(15, 10, 0); // 11pm

  function pad(num) {
    return ("0"   parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate()   1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML =
      hh   ":"   mm   ":"   ss;
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();
</script>
 

Сделайте это функцией, найдите элементы, затем передайте элементы таймеру обратного отсчета, который затем изменяет элементы innerHTML и т.д.

Если вам нужно разное время, используйте data атрибуты для установки параметров для элемента, который вы можете получить elm.dataset.somename , см. Документы

 function countdown(elm) {
  var start = new Date;
  start.setHours(elm.dataset.h || 0, elm.dataset.m || 0, elm.dataset.s || 0); // from dataset

  function pad(num) {
    return ("0"   parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate()   1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    elm.innerHTML =
      hh   ":"   mm   ":"   ss;
    setTimeout(tick, 1000);
  }
  tick();
}

document.querySelectorAll('.timer').forEach(countdown) 

 <div class="timer" data-h="1" data-m="10" data-s="0"></div>
<div class="timer" data-h="3" data-m="15" data-s="5"></div>
<div class="timer" data-h="6" data-m="20" data-s="10"></div>
<div class="timer" data-h="12" data-m="30" data-s="59"></div>