js實現計數器


先介紹兩個函數:

  • setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。
  • clearTimeout() 方法可取消由 setTimeout() 方法設置的定時操作。如果方法還未被執行,我們可以使用 clearTimeout() 來阻止它。
<!DOCTYPE html>
<html>
<head>
  <title>js實現計數器</title>
</head>
<body>
  <button onclick="startCount()">開始計數!</button>
  <input type="text" id="counter">
  <button onclick="stopCount()">停止計數!</button>
<p>
點擊 "開始計數!" 按鈕開始執行計數程序。輸入框從 0 開始計算。 點擊 "停止計數!" 按鈕停止后,可以再次點擊點擊 "開始計數!" 按鈕會接着計數。
</p>

<script>
var cnt = 0;
var t;
var timer_is_on = 0;

function timedCount() {
    document.getElementById("counter").value = cnt;
    cnt = cnt + 1;
    t = setTimeout(function(){ timedCount() }, 1000);
}

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;
}
</script>

</body>
</html>

 

 

參考鏈接:https://www.runoob.com/jsref/met-win-settimeout.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM