嘿伙计们，所以我试图制作一个间隔计时器，用户输入轮数，工作间隔长度和休息间隔长度。因此，如果用户输入30秒工作，10秒休息和10轮，计时器将显示＆＃34; WORK＆＃34;对于标题并运行30秒，然后标题将更改为＆＃34; REST＆＃34;并再跑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);
}
}
}
HTML：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/workitt.css"/>
<script type="text/javascript" src="js/stopwatch.js"></script>
<title>Workitt</title>
</head>
<body>
<div class="header" style="margin: 0 auto">
<h1><img src="images/workitt-header.jpg" alt="header" /></h1>
<ul id="navbar">
<li><a href="workitt.html">Home</a></li>
<li> | </li>
<li><a href="createworkout.html">Custom Workout</a>
<ul>
<li><a href="strength.html">Strength Workout</a></li>
<li><a href="cardio.html">Cardio Workout</a></li>
<li><a href="stretching.html">Stretching Workout</a></li>
<li><a href="swimming.html">Swimming Workout</a></li>
<li><a href="office.html">Office Workout</a></li>
</ul>
</li>
<li> | </li>
<li><a href="library.html">Workout Library</a>
<ul>
<li><a href="upperbody.html">Upper Body</a></li>
<li><a href="lowerbody.html">Lower Body</a></li>
<li><a href="cardiowork.html">Cardio</a></li>
<li><a href="core.html">Core</a></li>
</ul>
</li>
<li> | </li>
<li><a href="accessories.html">Fitness Accessories</a>
<ul>
<li><a href="fitnesscalculators.html">Fitness Calculators</a></li>
<li><a href="fitnesstimers.html">Fitness Timers</a></li>
<li><a href="diary.html">Fitness Journal</a></li>
<li><div class="clearfix"></div></li>
</ul>
</li>
</ul>
<p> </p>
</div>
<div> </div>
<div class="body" style="margin: 0 auto">
<div id="work">WORK</div>
<div id="output"><span class='left'> Round</span><span class='right'>Time </span><br/><span id="output2"> 0 00:00:00</span></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div>
Number of Rounds: <input type="text" id="numRounds" name="Rounds" size="6"/>
Length of Work: <input type="text" id="numWork" name="Work" size="6"/> (seconds)
Length of Rest: <input type="text" id="numRest" name="Rest" size="6"/> (seconds)
</div>
<br/>
<div id="controls">
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button><br/><br/>
<span id="error"></span>
</div>
<br/>
</div>
<p> </p>
<p><br /><br /></p>
<hr style="width: 30%;margin-left: auto, margin-right: auto" />
<div style="text-align:center">Created By: Danielle Hafner<br/>
<script type="text/javascript">
<!--
document.write("Last Modified " + document.lastModified)
// -->
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
让我用一个简单的例子回答你的问题。因此，我们希望将计时器变为变量，这样我们就知道在调用clearInterval时要清除什么。因此，对于我们的计时器，我们可以执行：myTimer = setInterval(...)，然后当我们想要清除它时，我们执行：clearInterval(myTimer)。所以这是一个小例子，一个重置自己的基本计数器：
<强> HTML：
<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="counter">0</div>
<强> JS：
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;
}
答案 1 :(得分：-1)
咀嚼：http://jsfiddle.net/4cmEB/5/： - ）
根据需要更改rounds，states和lengths。我在名为wait的轮次之间添加了另一个状态，你可以将其删除，但是还要从长度中删除相应的时间。