https://stackoverflow.com/questions/23257873
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianChew on this: http://jsfiddle.net/4cmEB/5/ :-)
Change rounds, states and lengths as you suit. I've added another state between rounds called wait, you can remove it, but remenber to remove also the corresponding time from lengths.
SetInterval(), ClearInterval() timer questions for javascript
-
08-07-2023 - |
题
Hey guys so I'm trying to make an interval timer where the user inputs the number of rounds, length of working interval and length of resting interval. So if the user inputs 30 sec for work, 10 seconds for rest, and 10 rounds, the timer will display "WORK" for the title and run for 30 seconds,and then the title will change to "REST" and run for 10 more seconds (40 seconds total). Once 40 seconds is reached, the timer will go back to 0 and continue to do this for 9 more rounds (10 in total). I've never created a timer before so I am a little confused. I have gotten the timer to work, but I am having trouble changing the title and restarting the timer at each round. Below are copies of both my HTML and Javascript. any help is much appreciated!
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>
解决方案 2
其他提示
Let me answer your question with a simple example. So we want to make our timer a variable, that way we know what to clear when clearInterval is called. So for our timer we can do : myTimer = setInterval(...), then when we want to clear it we do: clearInterval(myTimer). So here is a small example, a basic counter that resets itself:
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;
}
Fiddle here: http://jsfiddle.net/AniHouse/aCfEL/
不隶属于 StackOverflow
