如何在 JavaScript 中为秒表制作播放和暂停按钮
[英]How to make a Play and Pause Button for Stopwatch in JavaScript
问题描述
我正在尝试在我的代码中实现播放和暂停 function。 但暂停一次后，它就不再开始了。 我尝试将更新计时器 function 存储在 object 中，然后从 class 外部调用它，以便我可以暂停它。 如何改进我的实施？
var playPause = document.querySelector(".playpause"); var x = document.querySelector(".div"); var y = document.querySelector(".div1"); var countdown = document.querySelector(".countdown"); const initialTime = 20; let time = 0; let lala = 1; let gate = false; const timerClass = { updatecountDown: setInterval(function() { const min = Math.floor(time / 60); let sec = time % 60; sec = sec < 10? "0" + sec: sec; countdown.innerHTML = `${min}:${sec}`; let ini = (time * 100) / initialTime; let percentage = ini * (1 / 100) * y.offsetWidth; x.style.width = percentage + "px"; if (time == initialTime) clearInterval(updatecountDown); time++; }, 1000), }; timerClass.updatecountDown; playPause.addEventListener("mouseup", function() { if (gate == false) { clearInterval(timerClass.updatecountDown); playPause.innerHTML = `Play`; gate = true; } else { // Want to write something here so that timer start again timerClass.updatecountDown; playPause.innerHTML = `Pause`; gate = false; } });
.div { background: orange; width: 60px; height: 20px; }.div1 { background-color: gray; }.dot { background-color: hotpink; border-radius: 50%; height: 25px; width: 25px; left: 100px; display: inline-block; }.countdown { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 50px; }
<body> <pc class='countdown'>10.10</pc> <div class="div1"> <div class="div"> <span class="dot"> </span> </div> </div> <button class="playpause">Pause</button> </body>
2 个解决方案
解决方案1
0 已采纳 2021-12-22 17:29:17
为此，您需要拔出传递给setInterval的 function 。 通过这样做，您可以在需要重新启动它时直接调用它。 问题是一旦你清除了间隔， timerClass.updatecountDown就是 null 并且没有间隔 function 的概念。
var playPause = document.querySelector(".playpause"); var x = document.querySelector(".div"); var y = document.querySelector(".div1"); var countdown = document.querySelector(".countdown"); const initialTime = 20; let time = 0; let lala = 1; let gate = false; const intervalFn = function() { const min = Math.floor(time / 60); let sec = time % 60; sec = sec < 10? "0" + sec: sec; countdown.innerHTML = `${min}:${sec}`; let ini = (time * 100) / initialTime; let percentage = ini * (1 / 100) * y.offsetWidth; x.style.width = percentage + "px"; if (time == initialTime) clearInterval(timerClass.updatecountDown); time++; }; const timerClass = { updatecountDown: setInterval(intervalFn, 1000), }; playPause.addEventListener("mouseup", function() { if (gate == false) { clearInterval(timerClass.updatecountDown); playPause.innerHTML = `Play`; gate = true; } else { // Want to write something here so that timer start again timerClass.updatecountDown = setInterval(intervalFn, 1000); playPause.innerHTML = `Pause`; gate = false; } });
.div { background: orange; width: 60px; height: 20px; }.div1 { background-color: gray; }.dot { background-color: hotpink; border-radius: 50%; height: 25px; width: 25px; left: 100px; display: inline-block; }.countdown { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 50px; }
<body> <pc class='countdown'>10.10</pc> <div class="div1"> <div class="div"> <span class="dot"> </span> </div> </div> <button class="playpause">Pause</button> </body>
解决方案2
0 2021-12-22 17:30:57
我假设您希望updatecountDown成为 function。 目前，它是一个保存计时器 id 的属性（由setInterval返回）。
我建议像这样创建两个函数 start 和 stop
const timerClass = {
// holds the timer Id
updatecountDown: null,
// start/resume timer
start: function() {
this.updatecountDown = setInterval(function() {
const min = Math.floor(time / 60);
let sec = time % 60;
sec = sec < 10 ? "0" + sec : sec;
countdown.innerHTML = `${min}:${sec}`;
let ini = (time * 100) / initialTime;
let percentage = ini * (1 / 100) * y.offsetWidth;
x.style.width = percentage + "px";
if (time == initialTime) this.stop();
time++;
}.bind(this), 1000);
},
// pause timer
stop: function() {
clearInterval(this.updatecountDown);
}
};
// Starting timer
timerClass.start();
// timerClass.updatecountDown;
// changing from mouseup to click
playPause.addEventListener("click", function() {
if (gate == false) {
// clearInterval(timerClass.updatecountDown);
timerClass.stop();
playPause.innerHTML = `Play`;
gate = true;
} else {
// Want to write something here so that timer start again
// timerClass.updatecountDown;
timerClass.start();
playPause.innerHTML = `Pause`;
gate = false;
}
});
实现：如何仅使用HTML和Javascript制作播放/暂停按钮？
[英]Materialize: How to make a play/pause button using nothing but HTML and Javascript?
如何使用 javascript/jquery 为播放/暂停按钮制作循环
[英]how to make a loop for a play/pause button using javascript/jquery
当用户使用 vanilla JS 两次单击同一个按钮时，如何使秒表暂停？
[英]How to make a stopwatch pause when user clicks on the same button twice with vanilla JS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.