我是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)
}
}