如何在使用本地存储单击按钮后开始倒计时

Question

if(localStorage.getItem("total_seconds")){
    var total_seconds = localStorage.getItem("total_seconds");
} 
else {
        var total_seconds = 6*10;
} 
var minutes = parseInt(total_seconds/60);
var seconds = parseInt(total_seconds%60);

function countDownTimer(){
    if(seconds < 10){
        seconds= "0"+ seconds ;
    }
    if(minutes < 10){
        minutes= "0"+ minutes ;
} 
document.getElementById("quiz-time-left").innerHTML = "Time Left :"+minutes+"minutes"+seconds+"seconds";
    if(total_seconds <= 0){
        setTimeout("document.quiz.submit()",1);
        
    } else {
        total_seconds = total_seconds -1 ;
        minutes = parseInt(total_seconds/60);
        seconds = parseInt(total_seconds%60);
        localStorage.setItem("total_seconds",total_seconds)
        setTimeout("countDownTimer()",1000);
} 
} 
setTimeout("countDownTimer()",1000);

这是我复制的倒计时代码，我希望这个计数器在单击按钮后启动，但我似乎无法成功我找不到一种方法来放置 onclick 工作功能如果可以的话会很好收到一些建议和提示

Answer 1

将最后一行 setTimeout(countDownTimer(),1000); 放在 onclick 事件的函数中；如果您在按钮的 html 中将“onclick”指定为属性，则其值应设置为您放入其中的函数的名称：

<button onclick="startTimer();">start</button>

你的js在哪里

function startTimer (){
  setTimeout(countDownTimer,1000);
}

或者，将 setTimeout(countDownTimer,1000); 放入按钮的事件侦听器中：

let buttonElement = document.getElementById(<id attribute of button>);

buttonElement.addEventListener('click', () {setTimeout(countDownTimer,1000)});

此外，去掉 countDownTimer() 周围的引号 - 它是一个函数，而不是字符串。 setTimeout里面的函数名不要有()，只有函数名。最后，setTimeout 将在时间参数之后触发一次。如果您需要它每 1000 毫秒运行，请改用 setInterval。

要在用户returns时自动恢复定时器，修改初始if块如下：

if(localStorage.getItem("total_seconds")){
    var total_seconds = localStorage.getItem("total_seconds");
    // start timer from here as storage was found;
    startTimer ();
} 
else {
        var total_seconds = 6*10;
}

这样，如果在存储中找到一个值，则调用以启动计时器，表示之前的访问。您可能希望包括一些检查值是什么，除非它已经达到零，但您的代码的其余部分可能会处理这个问题。

如何在使用本地存储单击按钮后开始倒计时

How to make countdown start after clicking a button using local storage

javascript

local-storage