第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何用JS開啟onclick倒計時？

如何用JS開啟onclick倒計時？

MMMHUHU 2023-03-24 13:57:29
首先，感謝您閱讀我的文章。我目前正在學習 javascript，所以...對不起我的代碼（和我糟糕的英語）。不要猶豫，提出建議。我正在創(chuàng)建一個（假的）網(wǎng)站來預訂圖盧茲（法國）的自行車。用戶點擊 #canvasbtn 后，我想開始 2000 萬倒計時/計時器。在倒計時結束時，我想清除會話存儲和本地存儲。問題：計時器在頁面加載時啟動（而不是在您單擊#canvasbtn 時）。當?shù)褂嫊r為 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();
查看完整描述

3 回答

?
子衿沉夜

TA貢獻1828條經(jīng)驗 獲得超3個贊

正如我在評論中所說的canvasbtn.onclick = updateCountdown();那樣是錯誤的，因為您正在執(zhí)行該功能并將其分配給點擊。


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>


查看完整回答
反對 回復 2023-03-24
?
尚方寶劍之說

TA貢獻1788條經(jīng)驗 獲得超4個贊

當頁面加載倒計時開始，因為您直接調用分配給間隔變量的函數(shù)。只需更改以下內容并刪除變量間隔


var interval

canvasbtn.onclick = function(){

    interval = setInterval(updateCountdown, 1000)

};

在 clearInterval 之前添加這個以清除本地存儲


localStorage.clear();


查看完整回答
反對 回復 2023-03-24
?
慕碼人2483693

TA貢獻1860條經(jīng)驗 獲得超9個贊

此行會在頁面加載后立即開始您的間隔，并開始updateCountdown每秒調用一次：


var interval = setInterval(updateCountdown, 1000);

updateCountdown此行在頁面加載后立即運行該函數(shù)：


canvasbtn.onclick = updateCountdown();

然后，由于updateCountdown沒有顯式返回任何內容，它將值分配undefined給canvasbtn.onclick事件，這意味著當您單擊按鈕時什么也不會發(fā)生。


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


var interval = setInterval(updateCountdown, 1000);

然后添加let interval = null到代碼的開頭，并將您的 onclick 更改為如下所示：


canvasbtn.addEventListener('click', () => {

 interval = setInterval(updateCountdown, 1000);

})

通過在點擊處理程序之外定義我們的interval變量，我們允許稍后在我們的函數(shù)中訪問它updateCountdown，因此您可以清除它。


通過將 setInterval 包裝在 lambda（一個匿名函數(shù)，這個位：）中，() => {...}我們確保間隔在canvasbtn單擊時開始，而不是在頁面加載時開始。


您的代碼還有其他問題，并且可能比我在此處概述的更好的方法來執(zhí)行此操作，但是由于您正在學習，我試圖使我的回答簡單而集中。我不想為你做太多的重構。我希望這有幫助。祝你好運！


查看完整回答
反對 回復 2023-03-24
  • 3 回答
  • 0 關注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號