尝试使用用户输入构建一个简单的倒计时计时器。
我试着用一个反循环来倒计时，但似乎对我不起作用。我能得到一些帮助吗？谢谢。
//button
let button = document.getElementById('btn');
button.addEventListener('click', timer);
//Seconds variable
let seconds = 60;
function timer(){
let mins = parseInt(document.getElementById('min').value);
//Make the seconds tick down from 60
for(let i= seconds - 1; i >= 0; i--){
setInterval(function(){
seconds[i]}, 1000);
console.log(seconds[i]);
}
if(mins === 0 && seconds == 0){
console.log('completed')
}else{
console.log('still going');
}
//output the time.
let time= document.getElementById('time');
};
不太确定为什么需要seconds变量和mins变量，但以下是代码。这里不需要for循环。
不需要for循环的原因是，setInterval(function (){}, time_in_sec);方法需要两个参数。
- 等待
time_in_sec秒后要调用的函数。这个函数被反复调用，直到我们执行clearInterval() - 再次调用该函数之前等待的秒数(
time_in_sec(
因此setInterval()方法本身是迭代的，因此不需要for循环。
var myCounter;
//button
let button = document.getElementById('btn');
button.addEventListener('click', timer);
//Seconds variable
let seconds = 60;
function timer() {
clearInterval(myCounter); //to stop counter if already counting.
let mins = parseInt(document.getElementById('min').value);
var i = mins * seconds;
myCounter = setInterval(function() {
if (i < 0) {
console.log('completed');
clearInterval(myCounter);
} else {
console.log(i--);
console.log('still going');
let time = document.getElementById('time');
time.innerHTML = i;
}
}, 1000);
};<!doctype html>
<html>
<head>
</head>
<body>
<input type="text" id="min">
<button id="btn">Click me</button>
<p id="time">
Time
</p>
<script src="./main.js"></script>
</body>
</html>这里似乎混合了同步和异步代码。for循环将创建60个不同的setIntervals。我建议您进一步研究异步JavaScript的工作原理。为你的计时器功能尝试类似的东西：
let i = 60;
const intervalFunction = () => {
console.log(i);
if (i < 1) {
clearInterval(interval)
}
i--;
}
let interval = setInterval( intervalFunction, 1000);
var tstart,si,elaps;
var c = document.getElementById("c");
function cd(){
var dc = new Date();
var tnow = dc.getTime()/1000;
var tdiff = tnow - tstart;
c.innerHTML = elaps - tdiff;
console.log(c.innerHTML);
if (tdiff >= parseFloat(elaps)){
clearInterval(si);
}
}
function docd(){
clearInterval(si);
elaps = document.getElementById("cd").value;
var ds = new Date();
tstart = ds.getTime()/1000;
si = setInterval(cd,100);
}<h3>countdown timer user input</h3>
<input type="text" id="cd" value="15">
<input type="button" onclick="docd()" value="start/restart">
<div id="c"></div>