如何使用JS启动onclick倒计时？

问题描述

首先，感谢您阅读我的内容。我目前正在学习javascript，所以...对不起我的代码（和我的英语不好）。不要犹豫提出建议。

我正在创建（假）网站来预订法国图卢兹的自行车。用户单击#canvasbtn后，我想开始一个20百万的倒计时/计时器。倒计时结束时，我想清除会话存储和本地存储。

问题：页面加载时计时器开始计时（而不是单击#canvasbtn时）。而且我找不到倒计时为0时如何清除本地存储的信息。

感谢您的帮助

const startingMinutes = 20;
let time = startingMinutes * 60;
const canvasbtn = document.querySelector('#canvasbtn');
const countdown = document.getElementById('timer');


//fonction minuteur 
function updateCountdown (){
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
    let timerStatus = true;
    seconds= seconds < 10 ? '0' + seconds : seconds;

    countdown.innerHTML = minutes + ' : ' + seconds;
    time--;

    if ((minutes + seconds) <= 0){
        clearInterval(interval);
        timerStatus = false;
    } else{
    }
}
//Interval pour rafraichissement chaque seconde
var interval = setInterval(updateCountdown,1000);

//le timer est activé après avoir appuyer sur le bouton du canvas
canvasbtn.onclick = updateCountdown();

解决方法

页面加载时开始倒计时，因为您直接调用分配给时间间隔变量的函数。只需更改以下内容并删除可变时间间隔

var interval
canvasbtn.onclick = function(){
    interval = setInterval(updateCountdown,1000)
};

在clearInterval之前添加它以清除本地存储

localStorage.clear();

此行在页面加载后立即开始您的时间间隔，并每秒开始调用updateCountdown：

var interval = setInterval(updateCountdown,1000);

此行在页面加载后立即运行函数updateCountdown：

canvasbtn.onclick = updateCountdown();

然后，由于updateCountdown没有显式返回任何内容，因此它将undefined的值分配给canvasbtn.onclick事件，这意味着单击按钮时什么也不会发生。>

您要做的是完全删除此行：

var interval = setInterval(updateCountdown,1000);

然后将let interval = null添加到代码的开头，然后将onclick更改为以下内容：

canvasbtn.addEventListener('click',() => {
 interval = setInterval(updateCountdown,1000);
})

通过在点击处理程序外部定义interval变量，我们允许稍后在updateCountdown函数中对其进行访问，以便您将其清除。

通过将setInterval包装在lambda（匿名函数，该位：() => {...}）中，我们确保单击canvasbtn时开始间隔，而不是页面加载。

您的代码还有其他问题，并且可能比我在这里概述的更好的方法，但是由于您正在学习，所以我试图使我的答案简单而集中。我不想为您做太多的重构。我希望这有帮助。祝你好运！

正如我在评论中所述，canvasbtn.onclick = updateCountdown();是错误的，因为您正在执行该功能并将其分配给点击。

setInterval也不正确。在您点击按钮20分钟后，您的倒数计时也不会过期。他们将需要总共坐在页面上20分钟（也许您想要这样）。您应该使用date（）处理时间差异。

下面，我使用Date（）进行区别，并将值存储在localstorage中。仅当值已存储或单击按钮时，我才会启动计时器。

const maxTime = 20 * 1000 * 60 * 60;

const out = document.querySelector("#out");
function msToTime(duration) {
  let milliseconds = parseInt((duration % 1000));
  let seconds = Math.floor((duration / 1000) % 60);
  let minutes = Math.floor((duration / (1000 * 60)) % 60);
  // let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

  // hours = hours.toString().padStart(2,'0');
  minutes = minutes.toString().padStart(2,'0');
  seconds = seconds.toString().padStart(2,'0');
  milliseconds = milliseconds.toString().padStart(3,'0');

  //return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
  return minutes + ":" + seconds + "." + milliseconds;
}

let timer;
function countDown() {
  const diff = Date.now() - startTime;
  const remaining = Math.max(maxTime - diff,0);
  if (remaining > 0) {
    out.textContent = msToTime(remaining);
    timer = window.setTimeout(countDown,20);
  } else {
     out.textContent = 'complete';
     window.localStorage.removeItem('timer')
  }
}

const storageTime = window.localStorage.getItem('timer');
let startTime = storageTime ? +storageTime : null;

if (startTime) countDown();

document.querySelector("button").addEventListener("click",function (evt) {
  evt.preventDefault();
  if (timer) window.clearTimeout(timer);
  startTime = Date.now();
  countDown();
  window.localStorage.setItem('timer',startTime);
});

<div id="out"></div>

<button>start</button>

html javascript timer timer