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

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将在时间参数之后触发一次。如果需要每1000ms运行一次，请改用setInterval。

要在用户返回时自动恢复计时器，请按如下方式修改初始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;
} 

这样，如果在存储中发现一个值，则会调用以启动计时器，该值指示以前的访问。如果值已经达到零，您可能需要对其值进行一些检查，但代码的其余部分可能会处理这些问题。