javascript的SetInterval（）、ClearInterval（）计时器问题

嘿，伙计们，我正在尝试制作一个间隔计时器，用户在其中输入轮数、工作间隔长度和休息间隔长度。因此，如果用户输入30秒用于工作，10秒用于休息，10轮，计时器将显示标题“工作”并运行30秒，然后标题将更改为“休息”，并再运行10秒（总共40秒）。达到40秒后，计时器将返回0，并继续执行9轮（总共10轮）。我以前从未创建过计时器，所以我有点困惑。我已经让计时器工作了，但是我在每一轮中都很难更改标题和重新启动计时器。下面是我的HTML和Javascript的副本。非常感谢您的帮助

Javascript:

var time = 0;
var running = 0;
var rounds = document.getElementById("numRounds").value;
var work = document.getElementById("numWork").value;
var rest = document.getElementyId("numRest").value;


function startPause()
{
    if(document.getElementById("numRounds").value == "" | document.getElementById("numWork").value == "" | 
        document.getElementById("numRest").value == ""){
            document.getElementById("error").innerHTML = "*All fields are required.";
        }
    else{
        if(running == 0){
            running = 1;
            increment();
            document.getElementById("startPause").innerHTML = "Pause";
        }
        else{
            running = 0;
            document.getElementById("startPause").innerHTML = "Resume";
        }
    }
}

function reset()
{
    running = 0;
    time = 0;
    document.getElementById("startPause").innerHTML = "Start";
    document.getElementById("output2").innerHTML = "00:00:00";
}
function work(){
    time++;
    var mins = Math.floor(time/10/60);
    var secs = Math.floor(time/10 % 60);
    var tenths = time % 10;
    if(mins < 10){
        mins = "0" + mins;
    }
    if(secs < 10){
        secs = "0" + secs;
    }
    document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
    increment(); 
    if(secs < work){
        document.getElementById("work").innerHTML = "WORK";
    }
    var total = work + rest;
    else if(secs >= work && secs< total){
        document.getElementById("work") = "REST";
    }
    else{
        clearInterval();
        increment();
    }
}
function increment()
{
    if(running == 1){
        for(var i=0;i<rounds; i++){
            setTimeout(work(),100);
        }
    }
}

var-time=0；
var运行=0；
var rounds=document.getElementById（“numRounds”）.value；
var work=document.getElementById（“numWork”）.value；
var rest=document.getElementyId（“numRest”）.value；
函数startPause（）
{
if（document.getElementById（“numRounds”）.value==“document.getElementById（“numWork”）.value==“|
document.getElementById（“numRest”）。值==“”）{
document.getElementById（“错误”）.innerHTML=“*所有字段都是必需的。”；
}
否则{
如果（正在运行==0）{
运行=1；
增量（）；
document.getElementById（“startPause”）.innerHTML=“暂停”；
}
否则{
运行=0；
document.getElementById（“startPause”）.innerHTML=“Resume”；
}
}
}
函数重置（）
{
运行=0；
时间=0；
document.getElementById（“startPause”）.innerHTML=“开始”；
document.getElementById（“output2”）.innerHTML=“00:00:00”；
}
职能工作（）{
时间++；
var分钟=数学下限（时间/10/60）；
var秒=数学下限（时间/10%60）；
变量十分之一=时间%10；
如果（分钟<10）{
分钟=“0”+分钟；
}
如果（秒<10）{
secs=“0”+秒；
}
document.getElementById（“输出”）.innerHTML=mins+“：”+secs+“：”+十分之一；
增量（）；
如果（秒<工作）{
document.getElementById（“工作”）.innerHTML=“工作”；
}
var总计=工作+休息；
否则，如果（秒>=工时和秒<总计）{
document.getElementById（“工作”）=“休息”；
}
否则{
clearInterval（）；
增量（）；
}
}
函数增量（）
{
如果（运行==1）{
对于（var i=0；i
让我用一个简单的例子来回答你的问题。所以我们想让计时器成为一个变量，这样我们就知道在调用
clearInterval
时要清除什么。所以对于计时器，我们可以做：
myTimer=setInterval（…）
，然后当我们想清除它时，我们做：
clearInterval（myTimer）
。下面是一个小例子，一个自动复位的基本计数器：

HTML:

<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="counter">0</div>

var myTimer;
var count = 0;

document.getElementById("play").onclick = function()
{
   myTimer = setInterval(counter, 1000);
   document.getElementById("play").disabled = true;
}

document.getElementById("stop").onclick = function()
{ 
    clearInterval(myTimer);
    count = 0; 
    document.getElementById("play").disabled = false;
}

function counter()
{
   count++;
   document.getElementById("counter").innerHTML = count;
}

在这里拉小提琴：
仔细咀嚼这个：：-）

根据需要更改
轮数
，
状态
和
长度
。我在轮数之间添加了另一个状态，名为
等待
，您可以删除它，但请记住也要从长度中删除相应的时间。
使用不同的时间段，以不同的顺序执行不同的操作，例如您将要使用的e> setTimeout

，而不是

setInterval

setTimeout

触发一次，然后在完成该时段后，使用另一个

setTimeout

来开始下一个时段。

setInterval

将不断反复触发相同的函数，如果您不清除它。哦，刚刚注意到您正在使用

setTimeout

，哟你需要使用

clearTimeout

，而不是

clearInterval

。如果我想实现这一点，但我想获得用户对var长度的输入，我该怎么做？我想我应该把var work=$（'numWork'）.val（）；var rest=$（'numRest'）.val（）；var length=[work，rest]；在start.click函数下，但该函数无法正常工作。您应该使用

$（“#numWork”）.val（）

注意

。有关jQuery选择器的详细信息：

var myTimer;
var count = 0;

document.getElementById("play").onclick = function()
{
   myTimer = setInterval(counter, 1000);
   document.getElementById("play").disabled = true;
}

document.getElementById("stop").onclick = function()
{ 
    clearInterval(myTimer);
    count = 0; 
    document.getElementById("play").disabled = false;
}

function counter()
{
   count++;
   document.getElementById("counter").innerHTML = count;
}