时间戳

首页 > 解决方案 > javascript倒数计时器用户输入

javascript - javascript倒数计时器用户输入

问题描述

尝试使用用户输入构建一个简单的倒数计时器。

我正在尝试使用反向 for 循环简单地倒计时秒数，但它似乎对我不起作用。我可以得到一些帮助，谢谢。

//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');
    
};

标签： javascript

解决方案

看起来您在这里混合了同步和异步代码。您的 for 循环将创建 60 个不同的 setInterval。我建议您多研究一下异步 JavaScript 的工作原理。为您的计时器功能尝试更多类似的东西：

let i  = 60;

const intervalFunction = () => {
    console.log(i);
    if (i < 1) {
        clearInterval(interval)
    }
    i--;
}

let interval = setInterval( intervalFunction, 1000);

推荐阅读