亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

倒計時功能不顯示 3-2-1 倒計時的最后一個數字

倒計時功能不顯示 3-2-1 倒計時的最后一個數字

桃花長相依 2022-05-14 15:19:33
和標題說的差不多。當倒計時開始時,它會變為“3”、“2”,然后執行應該在計時器達到零時啟動的功能,跳過數字“1”的顯示。實際的計時器輸出顯示在一個單獨的div元素中,您將在下面的代碼中看到。我在這里看到了一些關于錯誤倒計時時鐘的答案,但其中很多都使用 jQuery,而我只是使用香草 JavaScript,并且庫的使用對我來說仍然有點混亂。var count = 3;function startTimer() {    var timer = setInterval(function() {startTimer(count);}, 1000);     if(count === 0){        clearInterval(timer);        ranCoord(); //function to run when timer hits zero.    } else {        document.getElementById("target").innerText = count;        count--;    }}<div class="start">   <img src="images/start-default.png" onclick="startTimer();" alt="Click Here"/> </div><div id="target"></div>我注意到,如果我var count=3在函數中包含變量startTimer();,倒計時也不起作用,它只會停留在數字 3。有誰知道這是為什么?此外,如果我包含函數var timer = setInterval(function() {startTimer(count);}, 1000); 外部,那么它會在頁面加載時自動運行,這不是我想要的。我希望在單擊按鈕時開始倒計時,并發現當放置在函數內時它可以工作。
查看完整描述

3 回答

?
蝴蝶刀刀

TA貢獻1801條經驗 獲得超8個贊

如果在 startTimer 函數中聲明了 count 變量,則計時器的每次迭代都將覆蓋其計數值,因此不會倒計時。


setInterval無限重復其功能,因此只需要在循環外調用一次,而不是setTimeout只運行一次并且每次迭代都需要調用。


另一種使用方法setTimeout是:


function startTimer(count) {

    if (count <= 0) {

        ranCoord();

    } else {

        document.getElementById("target").innerText = count;

        setTimeout(function() { startTimer(--count); }, 1000);

    }

}

此版本還通過將剩余計數作為參數傳遞來避免使用全局變量。


查看完整回答
反對 回復 2022-05-14
?
達令說

TA貢獻1821條經驗 獲得超6個贊

您無需startTimer致電setInterval


var count = 3;


function startTimer() {

  var timer = setInterval(function() {

    if (count === 0) {

      clearInterval(timer);

      ranCoord(); //function to run when timer hits zero.

    } else {

      document.getElementById("target").innerText = count;

      count--;

    }

  }, 1000);


}


function ranCoord() {

  console.log("Timer hit 0")

}

img {

  height: 100px;

  width: 100px;

  outline: 1px solid blue;

}

<div class="start">

  <img src="images/start-default.png" onclick="startTimer();" />

</div>


<div id="target"></div>


查看完整回答
反對 回復 2022-05-14
?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

我認為您不需要添加更多代碼,您只需要像這樣簡化它


    var count = 3;

    function startTimer() {

        const timer = setInterval(function () {

            document.getElementById("target").innerText = count;

            count--;

            if (count <= 0) {

                clearInterval(timer);

                ranCoord();

            }

        }, 1000)

    }


查看完整回答
反對 回復 2022-05-14
  • 3 回答
  • 0 關注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號