javascript - JS倒计时叠加问题
本文介绍了javascript - JS倒计时叠加问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
以下代码是一个简易的计时器，可是连续点击计时按钮两次以上后，会导致计时加速问题，且无法暂停（停不下来～～），隐藏在其中的bug是什么？求解？
<!DOCTYPE html>
<html>
<head>
<title>
计时器
</title>
<style type="text/css">
div {
width: 400px;text-align:center;height: 500px;font-weight: 700;background-color: #ccc;font-size: 400px;margin: 0 auto;
}
</style></head>
<body>
<div><font color="red" size="28"></font></div>
<input type="button" value="计时开始⌚️">
<input type="button" value="计时暂停⏸️">
<script type="text/javascript">
//计时开始方法
var i = 0;
var times;
var prebtn = document.getElementsByTagName("input")[0].onclick=function()
{
times = window.setInterval(function(){
i++
document.getElementsByTagName("div")[0].innerHTML=i;
},1000);
}
//计时结束方法
var nextbtn = document.getElementsByTagName("input")[1].onclick=function()
{
var cleartimes = window.clearInterval(times);
}
</script></body>
</html>
解决方案
var prebtn = document.getElementsByTagName("input")[0].onclick=function()
{
clearInterval(times);
times = window.setInterval(function(){
i++
document.getElementsByTagName("div")[0].innerHTML=i;
},1000);
}这篇关于javascript - JS倒计时叠加问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
