javascript 帮我设置多个计时器

Question

我需要找到一种方法来替换所有包含单词 Hello! 的 div！带定时器。但是更多的 div 可能会出现，并且会发生相同的变量被重写的情况。我一直在循环寻找你好！ innerHTML.indexOf

总结：我需要一个计时器来替换每次弹出的单词。屏幕上可能有 10 个，稍后可能会出现更多。有没有办法制作一个包含 UTC 时间的动态变量，使其独一无二？

var myClasses = document.getElementsByClassName("last-message fs_small");

Answer 1

ID 需要唯一，使用 class

let clocks;
const messages = document.getElementById("messages");
const fmt = time => {
  let clock = []
  const hh = ~~(time / 3600),
    mm = ~~((time % 3600) / 60),
    ss = ~~time % 60;
  if (hh) clock.push("" + hh.toString().padStart(2, "0")); // change to != null to always get hours
  if (mm != null) clock.push(mm.toString().padStart(2, "0"))
  if (ss != null) clock.push(ss.toString().padStart(2, "0"))
  return clock.join(":")
};

const scan = setInterval(function() {
  [...document.querySelectorAll('.message')].forEach(div => {
    if (div.textContent.includes("Hello!")) {
      div.innerHTML = `<div class="clock" data-sec="0">00:00</div>`;
    }
  });
  clocks = [...document.querySelectorAll(".message .clock")]; 
}, 2000)

const setTime = () => { 
  if (clocks && clocks.length) clocks.forEach(clock => {
    let time = +clock.dataset.sec;
    time++;
    clock.dataset.sec = time;
    clock.innerText = fmt(time); 
  });
}

setInterval(setTime, 1000);

// test: 
setInterval(function() {
  messages.innerHTML += `<div class="message">Hello!</div>`
}, 5000)

<div id="messages"></div>

javascript 帮我设置多个计时器

javascript Help me with multiple timers

javascript

timer