如何在javascript中切换或暂停setInterval_Javascript_Html_Timer

如何在javascript中切换或暂停setInterval

javascript html timer

如何在javascript中切换或暂停setInterval,javascript,html,timer,Javascript,Html,Timer,我正在学习java脚本，我正在尝试创建时钟，它应该是“当我单击按钮时，时间应该停止更改，按钮应该从“停止时间”更改为“开始时间”&当我再次单击按钮时，时间应该开始更改，按钮应该从“开始时间”更改为“停止时间”.查看我的代码，并告诉我需要添加哪些代码或函数以及在哪里添加…我是it新手，因此我将感谢您的帮助 <!DOCTYPE html> <html> <body> <p>A script on this page starts this clock

我正在学习java脚本，我正在尝试创建时钟，它应该是“当我单击按钮时，时间应该停止更改，按钮应该从“停止时间”更改为“开始时间”&当我再次单击按钮时，时间应该开始更改，按钮应该从“开始时间”更改为“停止时间”.查看我的代码，并告诉我需要添加哪些代码或函数以及在哪里添加…我是it新手，因此我将感谢您的帮助

<!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>


此页上的脚本启动此时钟：

停止时间

//---这里的脚本---


var myVar=setInterval（函数（）{myTimer（）}，1000）；
函数myTimer（）{
var d=新日期（）；
变量t=d.toLocaleTimeString（）；
document.getElementById（“demo”）.innerHTML=t；
}
函数myStopFunction（）{
净距（myVar）；
}

您只需要一个小技巧就可以在这里切换功能：

var myVar=setInterval（函数（）{
myTimer（）
}, 1000);
var isPaused=假；
函数myTimer（）{
var d=新日期（）；
变量t=d.toLocaleTimeString（）；
document.getElementById（“demo”）.innerHTML=t；
}
函数切换函数（）{
如果（i暂停）{
myVar=setInterval（函数（）{
myTimer（）
}, 1000);
isPaused=false；
}否则{
净距（myVar）；
isPaused=真；
}
}

此页面上的脚本启动此时钟：

切换时间

试试这个

让currentTime=新日期（）；
让status=true；
让间隔=1；//以秒为单位
让dateFormat={hour:'numeric'，minute:'numeric'，second:'numeric'，hour12:true}；
让clock=document.querySelector（“#demo”）；
clock.innerHTML=currentTime.ToLocalString（'en-US'，dateFormat）；
让定时器=设置间隔(
函数（）{
currentTime.setSeconds（currentTime.getSeconds（）+间隔）；
clock.innerHTML=currentTime.ToLocalString（'en-US'，dateFormat）；
}，间隔*1000
);
let button=document.querySelector（“#button”）；
按钮。addEventListener（“单击”，再次单击）；
函数onClick（）{
如果（！状态）{
button.innerHTML='停止计时器'；
定时器=设置间隔(
函数（）{
currentTime.setSeconds（currentTime.getSeconds（）+间隔）；
clock.innerHTML=currentTime.ToLocalString（'en-US'，dateFormat）；
}，间隔*1000
);
回来
}
如果（状态）{
button.innerHTML='启动计时器'；
清除间隔（计时器）；
}
状态=！状态；
}

此页面上的脚本启动此时钟：

停止时间

Stackoverflow不是一项免费的代码编写服务或“如何使用”服务“辅导服务。花些时间在和中阅读更多关于该站点的信息，但它不会创建循环。它只工作一次，而且按钮不会从停止变为开始..？？？你能让它像我们运行时一样吗？它应该已经显示时间运行和停止按钮，当我按下停止按钮，然后时间得到停止和按钮更改为开始按钮。简言之时间在运行中不显示，但按下按钮后显示安全，非常完美。。。只需要6:02:45这样的时间格式，我认为自己找到答案对你来说是一个很好的实践；）如果没有，我会在1小时内发布一个我正在尝试的答案。事实上。我学习HTML很有趣也很简单，但是我在java中遇到了一些问题，尽管它也很有趣

<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>