我已经实现了暂停功能,但对于我的生活来说,我无法围绕简历功能进行思考。此应用的编码方式将秒变量重置为输入值。我想我已经盯着这个太久了,想不出如何建立简历功能。
let seconds;
let timer;
let isRunning = false;
function start(){
isRunning = !isRunning;
if(isRunning == true) {
seconds = document.getElementById("input").value;
document.getElementById('count-down').innerHTML = seconds;
timer = setInterval(check, 1000);
} else {
pause();
}
};
function pause () {
clearInterval(timer);
timer = null;
}
function check() {
if(seconds <= 0 ) {
clearInterval(timer);
document.getElementById('body').style.backgroundColor = "#80bfff";
} else {
seconds--;
document.getElementById('count-down').innerHTML = seconds;
}
};
</script>
<div id = "timer">
<div id="header">
<p>Timer</p>
</div>
<div id="body">
<p id="count-down"></p>
<p class="inline">Enter time(in seconds)</p>
<input class="inline" type="text" id="input">
<button type="button" onclick="start()">Start</button>
</div>
</div>
试试这个:
let seconds;
let timer;
let isRunning = false;
function start(){
isRunning = !isRunning;
if(isRunning == true) {
seconds = seconds ? seconds : document.getElementById("input").value;
document.getElementById('count-down').innerHTML = seconds;
timer = setInterval(check, 1000);
} else {
pause();
}
};
function pause () {
clearInterval(timer);
timer = null;
}
function stop(){
pause();
seconds = 0;
isRunning = false;
document.getElementById('count-down').innerHTML = seconds;
}
function check() {
if(seconds <= 0 ) {
clearInterval(timer);
isRunning = false;
document.getElementById('body').style.backgroundColor = "#80bfff";
} else {
seconds--;
document.getElementById('count-down').innerHTML = seconds;
}
};
<div id = "timer">
<div id="header">
<p>Timer</p>
</div>
<div id="body">
<p id="count-down"></p>
<p class="inline">Enter time(in seconds)</p>
<input class="inline" type="text" id="input">
<button type="button" onclick="start()">Start</button>
<button type="button" onclick="stop()">Stop</button>
</div>
</div>
当您点击"恢复"时,变量isRunning
为真,因此紧接着seconds
变量设置为输入元素的值。
您可以实现一个额外的布尔值来检查计时器是启动还是已完成,以便在计时器尚未启动/完成时仅将seconds
设置为输入值。
感谢您的回复。不幸的是,直到我完成项目后我才看到它们。我会发布我的解决方案,以防有人需要它。
<div id = "timer">
<div id="header">
<p>Timer</p>
</div>
<div id="body">
<p id="count-down"></p>
<p class="inline">Enter time(in seconds)</p>
<input class="inline" type="text" id="input">
<br>
<button type="button" id="button" onclick="start()">Start</button>
<button type="button" id="reset" onclick="reset()">Reset</button>
</div>
</div>
<script>
let seconds;
let timer;
let timeLeft = 0;
let isRunning = false;
let button = document.getElementById("button");
let counter = document.getElementById("count-down");
let body = document.getElementById("body");
function start(){
isRunning = !isRunning;
if (isRunning == true && timeLeft > 0) {
timer = setInterval(function(){check(timeLeft)}, 1000);
button.innerHTML = "Pause";
}
else if(isRunning == true) {
seconds = document.getElementById("input").value;
counter.innerHTML = seconds;
timer = setInterval(function(){check(seconds);}, 1000);
button.innerHTML = "Pause";
} else {
pause();
button.innerHTML = "Resume";
}
};
function pause () {
clearInterval(timer);
timer = null;
};
function check(someTime) {
if(someTime <= 0 ) {
clearInterval(timer);
body.style.backgroundColor = "#80bfff";
setTimeout(reset, 5000);
} else {
someTime--;
timeLeft--;
seconds--;
timeLeft = someTime;
counter.innerHTML = someTime;
}
};
function reset() {
clearInterval(timer);
timer = null;
seconds = "";
timeLeft = 0;
isRunning = false;
button.innerHTML = "Start";
counter.innerHTML = "";
body.style.backgroundColor = "white";
}
</script>