[英]SetInterval(), ClearInterval() timer questions for javascript
大家好,我想做一个间隔计时器,用户输入轮数,工作间隔的长度和休息间隔的长度。 因此,如果用户输入30秒的工作时间,10秒的休息时间和10轮回合,计时器将为标题显示“ WORK”并运行30秒,然后标题将变为“ REST”并再运行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>
让我用一个简单的例子回答您的问题。 因此,我们希望将计时器设为变量,这样我们就知道调用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;
}
在这里提琴: http : //jsfiddle.net/AniHouse/aCfEL/
咀嚼这个: http : //jsfiddle.net/4cmEB/5/ :-)
根据需要更改rounds
, states
和lengths
。 我在回合之间添加了另一个状态,称为wait
,您可以将其删除,但要注意也可以从长度中删除相应的时间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.