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>

阅读 3.2k

var prebtn = document.getElementsByTagName("input")[0].onclick=function() { clearInterval(times); times = window.setInterval(function(){ i++ document.getElementsByTagName("div")[0].innerHTML=i; },1000); }

JS倒计时叠加问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？