如何用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 seconde

var interval = setInterval(updateCountdown, 1000);

//le timer est activé après avoir appuyer sur le bouton du canvas

canvasbtn.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) {&nbsp; let milliseconds = parseInt((duration % 1000));&nbsp; let seconds = Math.floor((duration / 1000) % 60);&nbsp; let minutes = Math.floor((duration / (1000 * 60)) % 60);&nbsp; // let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);&nbsp; // hours = hours.toString().padStart(2, '0');&nbsp; minutes = minutes.toString().padStart(2, '0');&nbsp; seconds = seconds.toString().padStart(2, '0');&nbsp; milliseconds = milliseconds.toString().padStart(3, '0');&nbsp; //return hours + ":" + minutes + ":" + seconds + "." + milliseconds;&nbsp; return minutes + ":" + seconds + "." + milliseconds;}let timer;function countDown() {&nbsp; const diff = Date.now() - startTime;&nbsp; const remaining = Math.max(maxTime - diff, 0);&nbsp; if (remaining > 0) {&nbsp; &nbsp; out.textContent = msToTime(remaining);&nbsp; &nbsp; timer = window.setTimeout(countDown, 20);&nbsp; } else {&nbsp; &nbsp; &nbsp;out.textContent = 'complete';&nbsp; &nbsp; &nbsp;window.localStorage.removeItem('timer')&nbsp; }}const storageTime = window.localStorage.getItem('timer');let startTime = storageTime ? +storageTime : null;if (startTime) countDown();document.querySelector("button").addEventListener("click", function (evt) {&nbsp; evt.preventDefault();&nbsp; if (timer) window.clearTimeout(timer);&nbsp; startTime = Date.now();&nbsp; countDown();&nbsp; window.localStorage.setItem('timer', startTime);});<div id="out"></div><button>start</button>

Answer 2

当页面加载倒计时开始，因为您直接调用分配给间隔变量的函数。只需更改以下内容并删除变量间隔var intervalcanvasbtn.onclick = function(){&nbsp; &nbsp; 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', () => {&nbsp;interval = setInterval(updateCountdown, 1000);})通过在点击处理程序之外定义我们的interval变量，我们允许稍后在我们的函数中访问它updateCountdown，因此您可以清除它。通过将 setInterval 包装在 lambda（一个匿名函数，这个位：）中，() => {...}我们确保间隔在canvasbtn单击时开始，而不是在页面加载时开始。您的代码还有其他问题，并且可能比我在此处概述的更好的方法来执行此操作，但是由于您正在学习，我试图使我的回答简单而集中。我不想为你做太多的重构。我希望这有帮助。祝你好运！