为什么 clearInterval() 在计时器 Js 中不起作用？
Why clearInterval() is not working in timer Js?
我正在接受与 js 合作的培训，其中一个项目是番茄钟。
计时器在主面板上运行良好，并在选项卡之间停止和切换。
但是如果你点击header和select里面的任何一个选项里面的时钟按钮，那么定时器不会停止，切换标签的时候也不会清零，加上结束的时候，会进入负.
timerInt = setInterval(timerF, 1000);
function timerF() {
if (sec === 0) {
sec = 59;
min--;
} else {
sec--;
}
if (sec < 10) {
timeSec.textContent = `0${sec}`;
} else {
timeSec.textContent = `${sec}`;
}
if (min < 10) {
timeMin.textContent = `0${min}`;
} else {
timeMin.textContent = `${min}`;
}
if (sec <= 0 && min <= 0) {
clearInterval(timerInt);
timeSec.textContent = `00`;
timeMin.textContent = `00`;
}
}
这是第一个选项 selected（20 分钟）时执行的代码：
time1.addEventListener("click", function () {
clearInterval(timerInt);
timeChoose = 20;
setTimes.classList.remove("active-time");
startBtn.removeAttribute("disabled", "disabled");
pomo.classList.add("active");
longBreak.classList.remove("active");
shortBreak.classList.remove("active");
startBtn.classList.add("active-btn");
timeSec.textContent = `00`;
timeMin.textContent = `20`;
startBtn.addEventListener("click", function () {
timer(timeChoose);
startBtn.setAttribute("disabled", "disabled");
});
});
Link 到示例页面，以便更容易理解我在说什么并查看代码。
请帮助我在 selection 之后让定时器正常工作
https://createchaoslab.github.io/pomo/
你叫 Timer。但是没有定时器功能。
试试这个。
已编辑：
var tabs = document.querySelectorAll(".tab");
const first = document.querySelector(".first");
const timeMin = document.querySelector(".time-min");
const timeSec = document.querySelector(".time-sec");
var startBtn = document.querySelector(".start-btn");
const time1 = document.querySelector(".time1");
const time2 = document.querySelector(".time2");
const time3 = document.querySelector(".time3");
const setTimes = document.querySelector(".set-times");
const setTimesBtn = document.querySelector(".set-time img");
let timerInt;
let timeChoose=2;
function timer(timeChoose = 10) {
let sec = 0;
let min = timeChoose;
timerInt = setInterval(timerF, 1000);
function timerF() {
if (sec == 0) {
sec = 59;
min--;
} else {
sec--;
}
if (sec < 10) {
timeSec.innerHTML = `0${sec}`;
} else {
timeSec.innerHTML = `${sec}`;
}
if (min < 10) {
timeMin.innerHTML = `0${min}`;
} else {
timeMin.innerHTML = `${min}`;
}
if (sec <= 0 && min <= 0) {
clearInterval(timerInt);
timeSec.innerHTML = `00`;
timeMin.innerHTML = `00`;
}
}
}
tabs.forEach(tab => {
tab.addEventListener('click', function handleClick(event) {
clearInterval(timerInt);
[].forEach.call(tabs, function(el) {
el.classList.remove("active");
});
this.classList.add("active");
if(this.classList.contains('first')){
timeSec.innerHTML = `00`;
if (timeChoose < 10) {
timeMin.innerHTML = `0${timeChoose}`;
} else {
timeMin.innerHTML = `${timeChoose}`;
}
startBtn.classList.add("active-btn");
startBtn.removeAttribute("disabled", "disabled");
}
else{
if(this.classList.contains('second')){
timeSec.innerHTML = `00`;
timeMin.innerHTML = `01`;
timer(1);
}
else{
timeSec.innerHTML = `00`;
timeMin.innerHTML = `04`;
timer(4);
}
startBtn.classList.remove("active-btn");
}
});
});
function setT(min) {
clearInterval(timerInt);
timeChoose = min;
[].forEach.call(tabs, function(el) {
el.classList.remove("active");
});
setTimes.classList.remove("active-time");
startBtn.removeAttribute("disabled", "disabled");
first.classList.add("active");
startBtn.classList.add("active-btn");
timeSec.innerHTML = `00`;
timeMin.innerHTML = `${timeChoose}`;
}
time1.addEventListener("click", function () {
setT(20);
});
time2.addEventListener("click", function () {
setT(40);
});
time3.addEventListener("click", function () {
setT(60);
});
startBtn.addEventListener("click", function () {
timer(timeChoose);
startBtn.setAttribute("disabled", "disabled");
});
setTimesBtn.addEventListener("click", function () {
setTimes.classList.toggle("active-time");
});
body{
background: rgb(221, 99, 0);
}
.header {
border-bottom: 2px solid #fff;
margin-bottom: 70px;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.set-time {
display: flex;
}
.set-time img {
margin-left: 20px;
width: 40px;
height: 40px;
cursor: pointer;
padding: 0 10px;
}
.set-times {
visibility: hidden;
}
.set-times>* {
display: none;
}
.set-times.active-time>* {
display: block;
}
.set-times.active-time {
visibility: visible;
background: #ff8100;
display: flex;
padding: 10px 30px;
border-radius: 20px;
transition: all.4s;
-webkit-transition: all.4s;
-moz-transition: all.4s;
-ms-transition: all.4s;
-o-transition: all.4s;
}
.time-var {
padding: 0px 10px;
font-size: 20px;
color: #fff;
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
letter-spacing: 1px;
cursor: pointer;
}
.time-var:hover {
background-color: #f5812e;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.time-var+.time-var {
margin-left: 15px;
}
.tabs{
display:block;
position:relative;
width: 100%;
height: 40px;
padding: 10px;
}
.tab{
display: inline-block;
text-align: center;
width: 60px;
transition: all .3s;
font-size: 20px;
font-weight: 700;
color: #fff;
padding: 7px 10px;
margin: 0 10px;
cursor: pointer;
background-color: transparent;
border: transparent;
outline: none;
-webkit-transition: all .3s;
}
.tab.active{
background:rgb(168, 60, 18);
}
#text {
display: flex;
color: #fff;
justify-content: center;
align-items: center;
}
.start-btn.active-btn {
margin-top: 10px;
border-radius: 5px;
background-color: rgb(255, 230, 210);
color: rgb(221, 99, 0);
font-size: 15px;
border: transparent;
outline: none;
padding: 10px 20px;
cursor: pointer;
visibility: visible;
}
.start-btn {
visibility: hidden;
}
<body>
<header class="header">
<div class="container">
<div class="header-inner">
<div class="set-time">
<div class="set-times">
<div class="time-var time1">20 min</div>
<div class="time-var time2">40 min</div>
<div class="time-var time3">60 min</div>
</div>
<img src="data:image/png;base64,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" alt="" />
</div>
</div>
</div>
</header>
<div class="tabs">
<div class="tab first active">
tab1
</div>
<div class="tab second">
tab2
</div>
<div class="tab third">
tab3
</div>
</div>
<div>
<div id="text">
<div class="time-min">02</div> :
<div class="time-sec">00</div>
</div>
<button class="start-btn active-btn">START</button>
</div>
</body>
我正在接受与 js 合作的培训，其中一个项目是番茄钟。
计时器在主面板上运行良好，并在选项卡之间停止和切换。
但是如果你点击header和select里面的任何一个选项里面的时钟按钮，那么定时器不会停止，切换标签的时候也不会清零，加上结束的时候，会进入负.
timerInt = setInterval(timerF, 1000);
function timerF() {
if (sec === 0) {
sec = 59;
min--;
} else {
sec--;
}
if (sec < 10) {
timeSec.textContent = `0${sec}`;
} else {
timeSec.textContent = `${sec}`;
}
if (min < 10) {
timeMin.textContent = `0${min}`;
} else {
timeMin.textContent = `${min}`;
}
if (sec <= 0 && min <= 0) {
clearInterval(timerInt);
timeSec.textContent = `00`;
timeMin.textContent = `00`;
}
}
这是第一个选项 selected（20 分钟）时执行的代码：
time1.addEventListener("click", function () {
clearInterval(timerInt);
timeChoose = 20;
setTimes.classList.remove("active-time");
startBtn.removeAttribute("disabled", "disabled");
pomo.classList.add("active");
longBreak.classList.remove("active");
shortBreak.classList.remove("active");
startBtn.classList.add("active-btn");
timeSec.textContent = `00`;
timeMin.textContent = `20`;
startBtn.addEventListener("click", function () {
timer(timeChoose);
startBtn.setAttribute("disabled", "disabled");
});
});
Link 到示例页面，以便更容易理解我在说什么并查看代码。 请帮助我在 selection 之后让定时器正常工作 https://createchaoslab.github.io/pomo/
你叫 Timer。但是没有定时器功能。
试试这个。
已编辑：
var tabs = document.querySelectorAll(".tab");
const first = document.querySelector(".first");
const timeMin = document.querySelector(".time-min");
const timeSec = document.querySelector(".time-sec");
var startBtn = document.querySelector(".start-btn");
const time1 = document.querySelector(".time1");
const time2 = document.querySelector(".time2");
const time3 = document.querySelector(".time3");
const setTimes = document.querySelector(".set-times");
const setTimesBtn = document.querySelector(".set-time img");
let timerInt;
let timeChoose=2;
function timer(timeChoose = 10) {
let sec = 0;
let min = timeChoose;
timerInt = setInterval(timerF, 1000);
function timerF() {
if (sec == 0) {
sec = 59;
min--;
} else {
sec--;
}
if (sec < 10) {
timeSec.innerHTML = `0${sec}`;
} else {
timeSec.innerHTML = `${sec}`;
}
if (min < 10) {
timeMin.innerHTML = `0${min}`;
} else {
timeMin.innerHTML = `${min}`;
}
if (sec <= 0 && min <= 0) {
clearInterval(timerInt);
timeSec.innerHTML = `00`;
timeMin.innerHTML = `00`;
}
}
}
tabs.forEach(tab => {
tab.addEventListener('click', function handleClick(event) {
clearInterval(timerInt);
[].forEach.call(tabs, function(el) {
el.classList.remove("active");
});
this.classList.add("active");
if(this.classList.contains('first')){
timeSec.innerHTML = `00`;
if (timeChoose < 10) {
timeMin.innerHTML = `0${timeChoose}`;
} else {
timeMin.innerHTML = `${timeChoose}`;
}
startBtn.classList.add("active-btn");
startBtn.removeAttribute("disabled", "disabled");
}
else{
if(this.classList.contains('second')){
timeSec.innerHTML = `00`;
timeMin.innerHTML = `01`;
timer(1);
}
else{
timeSec.innerHTML = `00`;
timeMin.innerHTML = `04`;
timer(4);
}
startBtn.classList.remove("active-btn");
}
});
});
function setT(min) {
clearInterval(timerInt);
timeChoose = min;
[].forEach.call(tabs, function(el) {
el.classList.remove("active");
});
setTimes.classList.remove("active-time");
startBtn.removeAttribute("disabled", "disabled");
first.classList.add("active");
startBtn.classList.add("active-btn");
timeSec.innerHTML = `00`;
timeMin.innerHTML = `${timeChoose}`;
}
time1.addEventListener("click", function () {
setT(20);
});
time2.addEventListener("click", function () {
setT(40);
});
time3.addEventListener("click", function () {
setT(60);
});
startBtn.addEventListener("click", function () {
timer(timeChoose);
startBtn.setAttribute("disabled", "disabled");
});
setTimesBtn.addEventListener("click", function () {
setTimes.classList.toggle("active-time");
});
body{
background: rgb(221, 99, 0);
}
.header {
border-bottom: 2px solid #fff;
margin-bottom: 70px;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.set-time {
display: flex;
}
.set-time img {
margin-left: 20px;
width: 40px;
height: 40px;
cursor: pointer;
padding: 0 10px;
}
.set-times {
visibility: hidden;
}
.set-times>* {
display: none;
}
.set-times.active-time>* {
display: block;
}
.set-times.active-time {
visibility: visible;
background: #ff8100;
display: flex;
padding: 10px 30px;
border-radius: 20px;
transition: all.4s;
-webkit-transition: all.4s;
-moz-transition: all.4s;
-ms-transition: all.4s;
-o-transition: all.4s;
}
.time-var {
padding: 0px 10px;
font-size: 20px;
color: #fff;
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
letter-spacing: 1px;
cursor: pointer;
}
.time-var:hover {
background-color: #f5812e;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.time-var+.time-var {
margin-left: 15px;
}
.tabs{
display:block;
position:relative;
width: 100%;
height: 40px;
padding: 10px;
}
.tab{
display: inline-block;
text-align: center;
width: 60px;
transition: all .3s;
font-size: 20px;
font-weight: 700;
color: #fff;
padding: 7px 10px;
margin: 0 10px;
cursor: pointer;
background-color: transparent;
border: transparent;
outline: none;
-webkit-transition: all .3s;
}
.tab.active{
background:rgb(168, 60, 18);
}
#text {
display: flex;
color: #fff;
justify-content: center;
align-items: center;
}
.start-btn.active-btn {
margin-top: 10px;
border-radius: 5px;
background-color: rgb(255, 230, 210);
color: rgb(221, 99, 0);
font-size: 15px;
border: transparent;
outline: none;
padding: 10px 20px;
cursor: pointer;
visibility: visible;
}
.start-btn {
visibility: hidden;
}
<body>
<header class="header">
<div class="container">
<div class="header-inner">
<div class="set-time">
<div class="set-times">
<div class="time-var time1">20 min</div>
<div class="time-var time2">40 min</div>
<div class="time-var time3">60 min</div>
</div>
<img src="data:image/png;base64,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" alt="" />
</div>
</div>
</div>
</header>
<div class="tabs">
<div class="tab first active">
tab1
</div>
<div class="tab second">
tab2
</div>
<div class="tab third">
tab3
</div>
</div>
<div>
<div id="text">
<div class="time-min">02</div> :
<div class="time-sec">00</div>
</div>
<button class="start-btn active-btn">START</button>
</div>
</body>