有没有办法在 html 网站上运行多个脚本

Question

我想在多个 HTML 元素上使用它，但没有任何运气，比如有一个倒计时到不同时间的第二个元素

因为我试图更改第二个脚本中的所有变量名称（脚本副本的 HTML 元素 id 已更改，变量和函数名称已更改），但它没有给出任何输出。

就是这样

(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>

Answer 1

使它成为一个函数，找到元素然后将元素传递给倒数计时器，然后它会改变元素 innerHTML 等。

如果您想要不同的时间，请使用data attributes 设置您可以从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>