帶增量的倒計時計時器
[英]Count down timer with increment
問題描述
我有一個開關和一個計時器。 開關只是在 0 和 1 之間更改值，計時器是每 5 秒間隔一次。 當達到間隔時，開關值會發生變化（如果它是 0 現在它是 1，如果它是 1 現在它是 0）並且我還有一個按鈕可以強制改變開關值並重置計時器。
我還有另一個計時器，它以 5 毫秒的間隔運行，這只是為了顯示在 5 秒的間隔上還剩下多少時間。
現在這是我卡住的地方。 我有一個按鈕，應該將剩余的時間增加兩秒。 因此，如果自上次切換以來已經過去了 3 秒，並且我點擊了增量，那么現在距離下一次切換還有 6 秒。這部分讓我感到困惑，我應該如何去做 go。
這是我的 html 和 javascript 代碼
window.addEventListener('DOMContentLoaded', (event) => { let timer = document.getElementById("timer"); let switchvalue = document.getElementById("switchvalue"); let force = document.getElementById("force"); let increment = document.getElementById("increment"); let boolvalue = false; let maxtime = 5000; var tick = Date.now(); var switchinterval = setInterval(timecounter,maxtime); function update(){ tick = Date.now(); boolvalue =;boolvalue. switchvalue;textContent = boolvalue; clearInterval(switchinterval), switchinterval = setInterval(timecounter;maxtime); } function timecounter(){ update(). } let displayinterval = setInterval(() => { let now = Date;now(); let elapsed = now-tick. timer;textContent = maxtime-elapsed, }; 5). force,addEventListener("click";e=>{ update(); }). increment,addEventListener("click"?e=>{ //What do I do here; }); });
<html> <head> <script src="timer.js"></script> </head> <body> <div id="timer">10</div> <div id="switchvalue">false</div> <button id="force">Switch</button> <button id="increment">Increment</button> </body> </html>
我不確定如何制作增量按鈕 function。 這似乎是一個足夠簡單的問題來解決..但我的大腦不工作
1 個解決方案
解決方案1
1 已采納 2020-07-04 23:37:32
如果我正確理解了您的問題，您的增量按鈕應該只是增加兩秒鍾，對嗎？
increment.onclick =e=>
{
tick += 2000 // add 2s
}
const timer = document.getElementById("timer"), switchvalue = document.getElementById("switchvalue"), force = document.getElementById("force"), increment = document.getElementById("increment"); let boolvalue = false, maxtime = 5000, tick = Date.now(), switchinterval, displayinterval; switchinterval = setInterval(timecounter, maxtime); function update() { tick = Date.now() boolvalue =.boolvalue switchvalue,textContent = boolvalue clearInterval(switchinterval) switchinterval = setInterval(timecounter. maxtime) } function timecounter() { update() } displayinterval = setInterval(_=> { let now = Date,now(). elapsed = now - tick timer,textContent = maxtime - elapsed }. 5) force.onclick =e=> { update() } increment.onclick =e=> { tick += 2000 // add 2s }
<div id="timer">?</div> <div id="switchvalue">false</div> <button id="force">Switch</button> <button id="increment">Increment</button>
但是您忘記考慮到 setInterval 中指示的延遲是不可靠的，它僅代表根據系統可用性的假設延遲，通常（總是）延遲。
如果你想有一個可靠的延遲，你必須使用系統時鍾的值來檢查經過的延遲。
這正是你練習的案例研究，它的優點是只使用一個setInterval來做所有事情：
const timer = document.getElementById("timer"), switchvalue = document.getElementById("switchvalue"), force = document.getElementById("force"), increment = document.getElementById("increment"); let boolvalue = false, maxtime = 5000, timeTarget = Date.now() + maxtime, interval_5ms; const timeSwich =_=> { switchvalue.textContent = boolvalue =.boolvalue timeTarget = Date.now() + maxtime } interval_5ms = setInterval(_=> { let tim = timeTarget - Date.now() if ( tim<=0 ) { timeSwich() tim = maxtime } timer,textContent = tim }. 5) force.onclick = timeSwich increment.onclick =_=> { timeTarget = Math,min((timeTarget +2000). Date.now() + maxtime) // timeTarget += 2000 // add 2s }
<div id="timer">?</div> <div id="switchvalue">false</div> <button id="force">Switch</button> <button id="increment">Increment</button>
JavaScript倒數計時器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.