如何使用下面的代码在同一页面上制作多个倒数计时器？

Question

如何使用以下代码在同一页面上制作多个倒计时？ 我试图通过制作另一个 var start = document.getElementById("start2"); 来制作另一个倒数计时器和 var dis = document.getElementById("display2");但是当我点击 1 按钮时，只有第二个倒数计时器正在工作，

  

 var start1 = document.getElementById("start1");
var dis1 = document.getElementById("display1");
var finishTime1;
var timerLength1 = 10;
var timeoutID1;
dis1.innerHTML = "" + timerLength1;

if(localStorage.getItem('myTime')){
    Update();
}
start1.onclick = function () {
    localStorage.setItem('myTime', ((new Date()).getTime() + timerLength1 * 1000));
    if (timeoutID1 != undefined) window.clearTimeout(timeoutID1);
    Update();
}

function Update() {
    finishTime1 = localStorage.getItem('myTime');
    var timeLeft = (finishTime1 - new Date());
    dis1.innerHTML = "" + Math.max(timeLeft/1000,0)
    timeoutID1 = window.setTimeout(Update, 100);
}


var start2 = document.getElementById("start2");
var dis2 = document.getElementById("display2");
var finishTime2;
var timerLength = 100;
var timeoutID;
dis2.innerHTML = "" + timerLength;

if(localStorage.getItem('myTime')){
    Update();
}
start2.onclick = function () {
    localStorage.setItem('myTime', ((new Date()).getTime() + timerLength * 1000));
    if (timeoutID != undefined) window.clearTimeout(timeoutID);
    Update();
}

function Update() {
    finishTime2 = localStorage.getItem('myTime');
    var timeLeft = (finishTime2 - new Date());
    dis2.innerHTML = "" + Math.max(timeLeft/1000,0)
    timeoutID = window.setTimeout(Update, 100);
}

    <span id="display2"></span><button id="start1">START1</button> 

<br><br>

    <span id="display2"></span><button id="start1">START1</button> 

    enter code here

Answer 1

localStorage 使用相同的 ID。实际上，最好通过函数或类创建隔离上下文，然后更容易处理任意数量的计数器。您也可以使用 setInterval 代替 setTimer

再提示：在给字符串字段赋值时，不需要写“”+值，因为数字会自动转换成字符串

const createCounter = (startElementId, displayElementId, localStorageId, timerLength) => {
   const startElement = document.getElementById(startElementId),
      displayElement = document.getElementById(displayElementId)
      
   let timeoutID

   displayElement.innerHTML = timerLength
   
   const storageValue = localStorage.getItem(localStorageId)
   if (storageValue) startTimer()

   startElement.onclick = () => {
      const value = (new Date()).getTime() + timerLength * 1000
      localStorage.setItem(localStorageId, value)
      startTimer()
   }
   
   function startTimer () {
      if (timeoutID) clearInterval(timeoutID)
      timeoutId = setInterval(updateTime, 100)
   }

   function updateTime (finishTime) {
      finishTime = finishTime || localStorage.getItem(localStorageId)
      const timeLeft = finishTime - new Date()
      displayElement.innerHTML = Math.max(timeLeft / 1000, 0)
   }      
}

// run first timer for elements with ids start1 and display1
createCounter('start1', 'display1', 'someId1', 10)

// run second timer for elements with ids start1 and display1
createCounter('start2', 'display2', 'someId2', 60)

html

<button id=start1>Start</button>
<div id=display1></div>

<button id=start2>Start</button>
<div id=display2></div>