不明白为什么这个JavaScript代码不会运行

时间:2016-01-11 09:51:44

标签: settimeout

我是JavaScript的新手并编写了此代码。它以前工作过,但现在它没有,我不明白为什么。按钮上的文本甚至不会更改为“PAUSE”。当我在浏览器中尝试它时,它会在一段时间后说“由于长时间运行的脚本,localhost没有响应。”

                        <div>
                            <div id="tabataBox">
                                <p id="PauseGoText"></p>
                                <p id="stopwatch">CLICK TO START WORKOUT</p>
                                <button id="tabataButton" onclick="startPause()">START</button>
                            </div>
                                <span class="circle" id="el-1"></span>
                                <span class="circle" id="el-2"></span>
                                <span class="circle" id="el-2"></span>
                                <span class="circle" id="el-3"></span>
                                <span class="circle" id="el-4"></span>
                                <span class="circle" id="el-5"></span>
                                <span class="circle" id="el-6"></span>
                                <span class="circle" id="el-7"></span>
                                <span class="circle" id="el-8"></span>
                        </div>
                    </div>



var time = 0;
var running = 0;
var everySecond = true;
var max = 20;
var numberOfTimes = 1;

function startPause() {
    if (running == 0) {
        running = 1;
        document.getElementById("tabataButton").innerHTML = "PAUSE";
        increment();
    }
    else {
        running = 0;
        document.getElementById("tabataButton").innerHTML = "START";
    }
}

function reset() {
    time = 1;
    document.getElementById("stopwatch").innerHTML = "0";
    if (everySecond == true)
    {
        everySecond = false;
        max = 20;
        document.getElementById("tabataBox").style.backgroundColor = "green";
        document.getElementById('el-'+numberOfTimes).style.backgroundColor = "green";
        numberOfTimes++;
        document.getElementById("PauseGoText").innerHTML = "REST";
    }

    else {
        everySecond = true;
        max = 10;
        document.getElementById("tabataBox").style.backgroundColor = "red";
        document.getElementById("PauseGoText").innerHTML = "GO!";
    }
}

function increment() {
    if (running == 1) {

        setTimeout(function () {
            time++;

            if (time > max) {
                    reset();
                }

            document.getElementById("stopwatch").innerHTML = time;
            increment();

        }, 1000)
    }
}

0 个答案:

没有答案