javascript - JS倒數疊加問題
天蓬老师
天蓬老师 2017-05-18 10:46:32
0
3
584

以下程式碼是個簡易的計時器,可是連續點擊計時按鈕兩次以上後,會導致計時加速問題,且無法暫停(停不下來~~),隱藏在其中的bug是什麼?求解?

<!DOCTYPE html>
<html>
<head>

<title>
    计时器
</title>
<style type="text/css">
    
    p {
        width: 400px;text-align:center;height: 500px;font-weight: 700;background-color: #ccc;font-size: 400px;margin: 0 auto;
    }
</style>

</head>
<body>

##

<p><font color="red" size="28"></font></p>

<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("p")[0].innerHTML=i;
            },1000);
        }
        //计时结束方法
        var nextbtn = document.getElementsByTagName("input")[1].onclick=function()
        {
            var cleartimes = window.clearInterval(times);
        }

</script>

</body>

</html>###
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(3)
大家讲道理

雷雷

阿神

計時的函數裡判斷times 如果有值,直接返回;
或者有值的情况下先clearInterval然后再重新setInterval

仅有的幸福

點2次等於設定了2個計時器,所以會坑。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板