我有一个开关和一个计时器。开关仅在0到1之间改变值，计时器每5秒间隔一次。当达到间隔时，开关值会更改（如果现在是0，现在是1，如果现在是1，现在是0），我还有一个按钮，它会强制更改开关值并重置计时器。
我还有另一个计时器，它以5毫秒的间隔运行，这只是为了显示5秒钟的间隔还剩下多少时间。
现在，这就是我遇到的问题。我有一个按钮，应该将剩下的时间增加两秒钟。因此，如果自上次切换以来已经过了三秒钟，并且我按了增量，那么现在距下一次切换只有六秒钟了。那部分让我感到困惑，我应该如何去做。
这是我的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>我不确定如何使增量按钮起作用。看起来好像很简单的问题可以解决..但是我的大脑不起作用
如果我正确理解了您的问题，您的增量按钮应该只增加两秒钟，对吧？
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句