javascript的SetInterval（），ClearInterval（）計時器問題
[英]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>
2 個解決方案
解決方案1
1 2014-04-24 01:26:50
讓我用一個簡單的例子回答您的問題。 因此，我們希望將計時器設為變量，這樣我們就知道調用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/
解決方案2
-1 已采納 2014-04-24 02:39:28
咀嚼這個： http : //jsfiddle.net/4cmEB/5/ :-)
根據需要更改rounds ， states和lengths 。 我在回合之間添加了另一個狀態，稱為wait ，您可以將其刪除，但要注意也可以從長度中刪除相應的時間。
如何在 javascript 中使用 setInterval 和 clearInterval 在十秒后停止計時器？
[英]How to stop timer after ten seconds in javascript using setInterval and clearInterval?
clearInterval() 不停止 setInterval() javascript
[英]clearInterval() not stoping setInterval() javascript
在Javascript中遇到“ setInterval / clearInterval”問題
[英]Having issues with “setInterval/clearInterval” in Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
clearInterval不破壞setInterval計時器
如何在 javascript 中使用 setInterval 和 clearInterval 在十秒后停止計時器？
為什么clearInterval不清除setInterval計時器
在沒有clearInterval的情況下在setInterval上重置計時器
JavaScript動畫setInterval / clearInterval
javascript中的clearInterval和setInterval立即
clearInterval() 不停止 setInterval() javascript
JavaScript Timer clearInterval並發症
在Javascript中遇到“ setInterval / clearInterval”問題
Javascript：使用clearInterval停止setInterval
相關標簽