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

Posted 2023-05-08

【中文标题】有没有办法在 html 网站上运行多个脚本

【英文标题】：Is there a way to run multiple of a script on a html site

【发布时间】：2022-01-08 12:14:37

【问题描述】：

我想在多个 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>

【参考方案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>

【讨论】：

非常感谢！我能够完成我的学业，如果你想看看whstime.github.io/whs