Javascript 重置三个不同间隔按钮的setInterval定时器
问题：我有三个按钮可以设置不同的计时器。当我在第一次单击后单击计时器按钮时，它不会重置计时器，但会在计时器停止的位置继续计时 所需结果：当我单击计时器按钮（Pomodoro、lng break、shrt break）时，我希望计时器复位。例如：波莫多罗被设定为24分钟60秒。如果我在计时器设定为23分钟时单击相同的Pomodoro按钮，我希望它重置为原来的24分钟60秒 重新创建情景：Javascript 重置三个不同间隔按钮的setInterval定时器,javascript,html,timer,dom-events,setinterval,Javascript,Html,Timer,Dom Events,Setinterval,问题：我有三个按钮可以设置不同的计时器。当我在第一次单击后单击计时器按钮时，它不会重置计时器，但会在计时器停止的位置继续计时 所需结果：当我单击计时器按钮（Pomodoro、lng break、shrt break）时，我希望计时器复位。例如：波莫多罗被设定为24分钟60秒。如果我在计时器设定为23分钟时单击相同的Pomodoro按钮，我希望它重置为原来的24分钟60秒 重新创建情景： // Problem: Pomodor timer does not have functionality
// Problem: Pomodor timer does not have functionality
// Solution: Add functionality to the pomodor timer.
// IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
// Reset current interval time on reset button.
// If break buttons are clicked more than once, reset the time.
window.onload = function() {
var pomodoro = document.querySelector('#set-time'),
longBreak = document.querySelector('#long-brk'),
shortBreak = document.querySelector('#short-brk'),
stopButton = document.querySelector('#stop'),
startButton = document.querySelector('#start'),
resetButton = document.querySelector('#reset'),
container = document.querySelector('#container'),
timer = document.querySelector('#timer'),
seconds = 60; //set seconds
// Click event for break timers.
container.addEventListener('click', function(e) {
// store event target
var el = e.target;
if (el === pomodoro) {
setPomodoro();
} else if (el === longBreak) {
setLongBreak();
} else if (el === shortBreak) {
setShortBreak();
}
e.stopPropagation();
}, false);
// 1.1a Create a timer that counts down from 25 minutes.
function setPomodoro() {
var pomodoroMins = 24;
var intervalID = setInterval(function() { //set unique interval ID for each SI func.
timer.innerHTML = pomodoroMins + ':' + seconds;
seconds--;
if (seconds === 0) {
pomodoroMins--;
seconds = 60;
}
}, 1000);
// 2.2 When stop button is clicked, timer stops
stopButton.addEventListener('click', function(){
clearInterval(intervalID);
}, false);
}
// 1.2a Create a timer that counts down from 10 minutes
function setLongBreak() {
var longBreakMins = 9;
var intervalID2 = setInterval(function() {
timer.innerHTML = longBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
longBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function(){
clearInterval(intervalID2);
}, false);
}
// 1.3a Create a timer that counts down from 5 minutes.
function setShortBreak() {
var shortBreakMins = 4;
var intervalID3 = setInterval(function() {
timer.innerHTML = shortBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
shortBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function() {
clearInterval(intervalID3);
}, false);
}
};
<!DOCTYPE html>
<html>
<head>
<title>Pomodoro Timer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<header>
<div id="header"><h1>Pomodoro Timer</h1></div>
</header>
<div class="row">
<ul id="breaks">
<li><input type="submit" value="Pomodoro" id="set-time"></li>
<li><input type="submit" value="Long Break" id="long-brk"></li>
<li><input type="submit" value="Short Break" id="short-brk"></li>
</ul>
</div>
<h1 id=timer></h1>
<div class="row">
<ul id="buttons">
<li><input type="submit" value="Start" id="start"></li>
<li><input type="submit" value="Stop" id="stop"></li>
<li><input type="submit" value="Reset" id="reset"></li>
</ul>
</div>
<footer>
<p>© Laere 2016</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
// Problem: Pomodor timer does not have functionality
// Solution: Add functionality to the pomodor timer.
// IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
// Reset current interval time on reset button.
// If break buttons are clicked more than once, reset the time.
window.onload = function() {
var pomodoro = document.querySelector('#set-time'),
longBreak = document.querySelector('#long-brk'),
shortBreak = document.querySelector('#short-brk'),
stopButton = document.querySelector('#stop'),
startButton = document.querySelector('#start'),
resetButton = document.querySelector('#reset'),
container = document.querySelector('#container'),
timer = document.querySelector('#timer'),
seconds = 60; //set seconds
// Click event for break timers.
container.addEventListener('click', function(e) {
// store event target
var el = e.target;
if (el === pomodoro) {
setPomodoro();
} else if (el === longBreak) {
setLongBreak();
} else if (el === shortBreak) {
setShortBreak();
}
e.stopPropagation();
}, false);
// 1.1a Create a timer that counts down from 25 minutes.
function setPomodoro() {
var pomodoroMins = 24;
var intervalID = setInterval(function() { //set unique interval ID for each SI func.
timer.innerHTML = pomodoroMins + ':' + seconds;
seconds--;
if (seconds === 0) {
pomodoroMins--;
seconds = 60;
}
}, 1000);
// 2.2 When stop button is clicked, timer stops
stopButton.addEventListener('click', function(){
clearInterval(intervalID);
}, false);
}
// 1.2a Create a timer that counts down from 10 minutes
function setLongBreak() {
var longBreakMins = 9;
var intervalID2 = setInterval(function() {
timer.innerHTML = longBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
longBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function(){
clearInterval(intervalID2);
}, false);
}
// 1.3a Create a timer that counts down from 5 minutes.
function setShortBreak() {
var shortBreakMins = 4;
var intervalID3 = setInterval(function() {
timer.innerHTML = shortBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
shortBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function() {
clearInterval(intervalID3);
}, false);
}
};
<!DOCTYPE html>
<html>
<head>
<title>Pomodoro Timer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<header>
<div id="header"><h1>Pomodoro Timer</h1></div>
</header>
<div class="row">
<ul id="breaks">
<li><input type="submit" value="Pomodoro" id="set-time"></li>
<li><input type="submit" value="Long Break" id="long-brk"></li>
<li><input type="submit" value="Short Break" id="short-brk"></li>
</ul>
</div>
<h1 id=timer></h1>
<div class="row">
<ul id="buttons">
<li><input type="submit" value="Start" id="start"></li>
<li><input type="submit" value="Stop" id="stop"></li>
<li><input type="submit" value="Reset" id="reset"></li>
</ul>
</div>
<footer>
<p>© Laere 2016</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
// Problem: Pomodor timer does not have functionality
// Solution: Add functionality to the pomodor timer.
// IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
// Reset current interval time on reset button.
// If break buttons are clicked more than once, reset the time.
window.onload = function() {
var pomodoro = document.querySelector('#set-time'),
longBreak = document.querySelector('#long-brk'),
shortBreak = document.querySelector('#short-brk'),
stopButton = document.querySelector('#stop'),
startButton = document.querySelector('#start'),
resetButton = document.querySelector('#reset'),
container = document.querySelector('#container'),
timer = document.querySelector('#timer'),
seconds = 60; //set seconds
// Click event for break timers.
container.addEventListener('click', function(e) {
// store event target
var el = e.target;
if (el === pomodoro) {
setPomodoro();
} else if (el === longBreak) {
setLongBreak();
} else if (el === shortBreak) {
setShortBreak();
}
e.stopPropagation();
}, false);
// 1.1a Create a timer that counts down from 25 minutes.
function setPomodoro() {
var pomodoroMins = 24;
var intervalID = setInterval(function() { //set unique interval ID for each SI func.
timer.innerHTML = pomodoroMins + ':' + seconds;
seconds--;
if (seconds === 0) {
pomodoroMins--;
seconds = 60;
}
}, 1000);
// 2.2 When stop button is clicked, timer stops
stopButton.addEventListener('click', function(){
clearInterval(intervalID);
}, false);
}
// 1.2a Create a timer that counts down from 10 minutes
function setLongBreak() {
var longBreakMins = 9;
var intervalID2 = setInterval(function() {
timer.innerHTML = longBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
longBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function(){
clearInterval(intervalID2);
}, false);
}
// 1.3a Create a timer that counts down from 5 minutes.
function setShortBreak() {
var shortBreakMins = 4;
var intervalID3 = setInterval(function() {
timer.innerHTML = shortBreakMins + ':' + seconds;
seconds--;
if (seconds === 0) {
shortBreakMins--;
seconds = 60;
}
}, 1000);
stopButton.addEventListener('click', function() {
clearInterval(intervalID3);
}, false);
}
};
<!DOCTYPE html>
<html>
<head>
<title>Pomodoro Timer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<header>
<div id="header"><h1>Pomodoro Timer</h1></div>
</header>
<div class="row">
<ul id="breaks">
<li><input type="submit" value="Pomodoro" id="set-time"></li>
<li><input type="submit" value="Long Break" id="long-brk"></li>
<li><input type="submit" value="Short Break" id="short-brk"></li>
</ul>
</div>
<h1 id=timer></h1>
<div class="row">
<ul id="buttons">
<li><input type="submit" value="Start" id="start"></li>
<li><input type="submit" value="Stop" id="stop"></li>
<li><input type="submit" value="Reset" id="reset"></li>
</ul>
</div>
<footer>
<p>© Laere 2016</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
波莫多罗计时器
波莫多罗计时器
&抄袭；莱尔2016
感谢您的指导。您需要为每个计时器分别设置
秒数计数器；现在他们都共用一个。哇，我觉得自己像个白痴。我甚至没有考虑给每个计时器自己的秒变量。它做了我想让它做的事。谢谢你，伙计。我还有很多东西要学！