如何在 javascript 中切换或暂停 setInterval
[英]How to toggle or pause setInterval in javascript
问题描述
I am learning java Script and i am trying to create clock which should be "when I click the button, the time Should stop changing and the button Should change from “Stop time” to “Start time” & when I click the button again, the time should begin changing and the button should change from “Start time” to “Stop time”. See my codes and tell me which codes or function i need to add and where to add... I am newbie in it so i will appreciate your help..
我正在学习 java 脚本，我正在尝试创建时钟，它应该是“当我单击按钮时，时间应该停止更改并且按钮应该从“停止时间”更改为“开始时间”&当我再次单击按钮时，时间应该开始改变，按钮应该从“开始时间”变为“停止时间”。查看我的代码并告诉我我需要添加哪些代码或 function 以及在哪里添加...我是新手所以我会感谢你的帮助..
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
</body>
</html>
//---Script Here--- //--- 脚本在这里---
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
3 个解决方案
解决方案1
0 2017-09-24 00:25:03
You just need a little trick to toggle the function here you are:你只需要一个小技巧就可以在这里切换功能：
var myVar = setInterval(function () { myTimer() }, 1000); var isPaused = false; function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function toggleFunction() { if (isPaused) { myVar = setInterval(function () { myTimer() }, 1000); isPaused = false; } else { clearInterval(myVar); isPaused = true; } }
<p>A script on this page starts this clock:</p> <p id="demo"></p> <button onclick="toggleFunction()">Toggle time</button>
解决方案2
0 已采纳 2017-09-24 00:39:36
Try this one试试这个
let currentTime = new Date(); let status = true; let interval = 1; // in seconds let dateFormat = { hour: 'numeric', minute:'numeric', second: 'numeric', hour12: true }; let clock = document.querySelector('#demo'); clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat); let timer = setInterval( function () { currentTime.setSeconds(currentTime.getSeconds() + interval); clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat); }, interval * 1000 ); let button = document.querySelector('#button'); button.addEventListener('click', onClick); function onClick() { if (!status) { button.innerHTML = 'Stop timer'; timer = setInterval( function () { currentTime.setSeconds(currentTime.getSeconds() + interval); clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat); }, interval * 1000 ); return; } if (status) { button.innerHTML = 'Start timer'; clearInterval(timer); } status = !status; }
<p>A script on this page starts this clock:</p> <p id="demo"></p> <button id="button">Stop time</button>
解决方案3
0 2022-11-30 00:14:55
let time = document.getElementById("time"); let stopButton = document.getElementById("stop"); let timeCount = 0, currentTimeout; function play() { stopButton.hidden = false; clearInterval(currentTimeout); currentTimeout = setInterval(() => { timeCount++; const min = String(Math.trunc(timeCount / 60)).padStart(2, 0); const sec = String(Math.trunc(timeCount % 60)).padStart(2, 0); time.innerHTML = `${min}: ${sec}`; }, 1000); } function pause() { clearInterval(currentTimeout); } function stop() { stopButton.hidden = true; pause(); timeCount = 0; time.innerHTML = `00: 00`; }
<div> <h1 id="time">00: 00</h1> <br /> <div> <button onclick="play()">play</button> <button onclick="pause()">pause</button> <button onclick="stop()" id="stop" hidden>Reset</button> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.