如何用JS开启onclick倒计时?

首先,感谢您阅读我的文章。我目前正在学习 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();


MMMHUHU
浏览 123回答 3
3回答

子衿沉夜

正如我在评论中所说的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>

尚方宝剑之说

当页面加载倒计时开始,因为您直接调用分配给间隔变量的函数。只需更改以下内容并删除变量间隔var intervalcanvasbtn.onclick = function(){&nbsp; &nbsp; interval = setInterval(updateCountdown, 1000)};在 clearInterval 之前添加这个以清除本地存储localStorage.clear();

慕码人2483693

此行会在页面加载后立即开始您的间隔,并开始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单击时开始,而不是在页面加载时开始。您的代码还有其他问题,并且可能比我在此处概述的更好的方法来执行此操作,但是由于您正在学习,我试图使我的回答简单而集中。我不想为你做太多的重构。我希望这有帮助。祝你好运!
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript