JavaScript的倒計時器不會顯示兩次

Question

我有以下的JavaScript倒計時器，這是我從＃2後得到：

function startTimer(duration, display) { 
    var start = Date.now(), 
     diff, 
     minutes, 
     seconds; 
    function timer() { 
     diff = duration - (((Date.now() - start)/1000) | 0); 

     minutes = (diff/60) | 0; 
     seconds = (diff % 60) | 0; 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.textContent = minutes + ":" + seconds; 

     if (diff <= 0) { 
      start = Date.now() + 1000; 
     } 
    }; 

    timer(); 
    setInterval(timer, 1000); 
} 

window.onload = function() { 
    var fiveMinutes = 60 * 5, 
     display = document.querySelector('#time'); 
    startTimer(fiveMinutes, display); 
}; 

和我用下面的HTML，以顯示它：

<div class="timerConatiner"> 
    <div class="countDownTimer"><span id="time"></span></div> 
</div> 

我使用的網頁是響應式的，時間的位置根據屏幕大小而發生很大變化。

因此，我能想到的最佳方式是在HTML中使用2個版本的定時器，然後使用CSS將其中一個設置爲display:none，另一個設置爲display:block，具體取決於要顯示哪一個。

問題是隻有在HTML中聲明的第一個會顯示，而另一個永遠不可見。第二個不存在於網頁上，因爲它不會顯示在DOM瀏覽器中。

我曾嘗試創建2個定時器，具有獨立的ID如：

window.onload = function() { 
    var fiveMinutes = 60 * 5, 
     display = document.querySelector('#time'); 
    startTimer(fiveMinutes, display); 
}; 

window.onload = function() { 
    var fiveMinutes = 60 * 5, 
     display = document.querySelector('#time1'); 
    startTimer(fiveMinutes, display); 
}; 

但這不起作用。

有誰知道這是怎麼回事？我期望當我用獨立的id創建2個版本時，他們都會顯示，但顯然他們不會？

我相信我可以創建2個版本的計時器，但這看起來不太優雅。

Answer 1

作品真的很好我想OO 添加第二個div與跨度和修改你的onload功能lottile位;）

function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
     diff, 
 
     minutes, 
 
     seconds; 
 
    function timer() { 
 
     diff = duration - (((Date.now() - start)/1000) | 0); 
 

 
     minutes = (diff/60) | 0; 
 
     seconds = (diff % 60) | 0; 
 

 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
     display.textContent = minutes + ":" + seconds; 
 

 
     if (diff <= 0) { 
 
      start = Date.now() + 1000; 
 
     } 
 
    }; 
 

 
    timer(); 
 
    setInterval(timer, 1000); 
 
} 
 

 
function toggle(){ 
 
    if (document.getElementById("time").style.visibility == "hidden"){ 
 
    document.getElementById("time").style.visibility = "visible"; 
 
    document.getElementById("time2").style.visibility = "hidden"; 
 
    }else{ 
 
    document.getElementById("time2").style.visibility = "visible"; 
 
    document.getElementById("time").style.visibility = "hidden"; 
 
    } 
 
} 
 
window.onload = function() { 
 
    var fiveMinutes = 60 * 5; 
 
    var tenMinutes = 60 * 10;  
 
    display = document.querySelector('#time'); 
 
    startTimer(fiveMinutes, display); 
 
    display = document.querySelector('#time2'); 
 
    startTimer(tenMinutes, display); 
 
    
 
};

<div class="timerConatiner"> 
 
    <div class="countDownTimer"><span id="time"></span></div> 
 
    <div class="countDownTimer2"><span id="time2" style ="visibility: hidden"></span></div> 
 
</div> 
 
<input type = "button" onclick = "toggle()" value = "Toggle"></input>