如何在 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.