如何用JS开启onclick倒计时？

Question

首先，感谢您阅读我的文章。我目前正在学习 javascript，所以...对不起我的代码（和我糟糕的英语）。不要犹豫，提出建议。我正在创建一个（假的）网站来预订图卢兹（法国）的自行车。用户点击 #canvasbtn 后，我想开始 2000 万倒计时/计时器。在倒计时结束时，我想清除会话存储和本地存储。问题：计时器在页面加载时启动（而不是在您单击#canvasbtn 时）。当倒计时为 0 时，我找不到如何清除本地存储。https://github.com/ldoba/project-03感谢您的帮助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 secondevar interval = setInterval(updateCountdown, 1000);//le timer est activé après avoir appuyer sur le bouton du canvascanvasbtn.onclick = updateCountdown();

Answer 1

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

setInterval 也不准确。并且您的倒计时在点击按钮后 20 分钟后不会过期。他们总共需要在页面上停留 20 分钟（也许您想要）。您应该使用 date() 及时处理差异。

下面我使用 Date() 作为差值并将值存储在本地存储中。如果值在存储中或单击按钮，我只会启动计时器。

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>

Answer 2

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

var interval

canvasbtn.onclick = function(){

    interval = setInterval(updateCountdown, 1000)

};

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

localStorage.clear();

Answer 3

此行会在页面加载后立即开始您的间隔，并开始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单击时开始，而不是在页面加载时开始。

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