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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何用JS開(kāi)啟onclick倒計(jì)時(shí)？

如何用JS開(kāi)啟onclick倒計(jì)時(shí)？

MMMHUHU 2023-03-24 13:57:29
首先，感謝您閱讀我的文章。我目前正在學(xué)習(xí) javascript，所以...對(duì)不起我的代碼（和我糟糕的英語(yǔ)）。不要猶豫，提出建議。我正在創(chuàng)建一個(gè)（假的）網(wǎng)站來(lái)預(yù)訂圖盧茲（法國(guó)）的自行車。用戶點(diǎn)擊 #canvasbtn 后，我想開(kāi)始 2000 萬(wàn)倒計(jì)時(shí)/計(jì)時(shí)器。在倒計(jì)時(shí)結(jié)束時(shí)，我想清除會(huì)話存儲(chǔ)和本地存儲(chǔ)。問(wèn)題：計(jì)時(shí)器在頁(yè)面加載時(shí)啟動(dòng)（而不是在您單擊#canvasbtn 時(shí)）。當(dāng)?shù)褂?jì)時(shí)為 0 時(shí)，我找不到如何清除本地存儲(chǔ)。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貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

正如我在評(píng)論中所說(shuō)的canvasbtn.onclick = updateCountdown();那樣是錯(cuò)誤的，因?yàn)槟趫?zhí)行該功能并將其分配給點(diǎn)擊。


setInterval 也不準(zhǔn)確。并且您的倒計(jì)時(shí)在點(diǎn)擊按鈕后 20 分鐘后不會(huì)過(guò)期。他們總共需要在頁(yè)面上停留 20 分鐘（也許您想要）。您應(yīng)該使用 date() 及時(shí)處理差異。


下面我使用 Date() 作為差值并將值存儲(chǔ)在本地存儲(chǔ)中。如果值在存儲(chǔ)中或單擊按鈕，我只會(huì)啟動(dòng)計(jì)時(shí)器。


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>


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
尚方寶劍之說(shuō)

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊

當(dāng)頁(yè)面加載倒計(jì)時(shí)開(kāi)始，因?yàn)槟苯诱{(diào)用分配給間隔變量的函數(shù)。只需更改以下內(nèi)容并刪除變量間隔


var interval

canvasbtn.onclick = function(){

    interval = setInterval(updateCountdown, 1000)

};

在 clearInterval 之前添加這個(gè)以清除本地存儲(chǔ)


localStorage.clear();


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

此行會(huì)在頁(yè)面加載后立即開(kāi)始您的間隔，并開(kāi)始updateCountdown每秒調(diào)用一次：


var interval = setInterval(updateCountdown, 1000);

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


canvasbtn.onclick = updateCountdown();

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


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


var interval = setInterval(updateCountdown, 1000);

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


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

 interval = setInterval(updateCountdown, 1000);

})

通過(guò)在點(diǎn)擊處理程序之外定義我們的interval變量，我們?cè)试S稍后在我們的函數(shù)中訪問(wèn)它updateCountdown，因此您可以清除它。


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


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


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 3 回答
  • 0 關(guān)注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)