JavaScript--定時器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)

阿新 • • 發佈：2018-12-24

1.setTimeout()、clearTimeout(var param)

setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式，只調用一次
clearTimeout() 方法可取消由 setTimeout() 方法設定的定時操作，引數必須是由 setTimeout() 返回的 ID 值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title 
></title>
        <style>
            #mytime {
                background: #bbb;
                color: #fff;
                display: block;
            }
            
            .wrapper {
                text-align: center;
                width: 60%;
                margin 
: 250px auto;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">
            <h1 id=mytime>顯示時間</h1>
            <button id="stop" name="button" onclick="stop()">stop</button>
            <button id="start" name 
="button" onclick="start()">start</button>
            <button id="reset" name="button" onclick="reset()">reset</button>
        </div>
    </body>
    <script type="text/javascript">
        var h = m = s = ms = 0; //定義時，分，秒，毫秒並初始化為0；
        var time = 0;

        function timer() { //定義計時函式
            ms = ms + 50; //毫秒
            if(ms >= 1000) {
                ms = 0;
                s = s + 1; //秒
            }
            if(s >= 60) {
                s = 0;
                m = m + 1; //分鐘
            }
            if(m >= 60) {
                m = 0;
                h = h + 1; //小時
            }
            str = toDub(h) + "時" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
            mytime = document.getElementById('mytime');
            mytime.innerHTML = str;
            
            time = setTimeout(timer, 50); 
        }

        function reset() { //重置
            clearInterval(time);
            h = m = s = ms = 0;
            document.getElementById('mytime').innerHTML = "00時00分00秒0000毫秒";
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("stop").setAttribute("disabled", true);
        }

        function start() { //開始
            time =setTimeout(timer,50);
            document.getElementById("start").setAttribute("disabled", true);
            document.getElementById("stop").removeAttribute("disabled");
        }

        function stop() { //暫停
            clearTimeout(time);
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("stop").setAttribute("disabled", true);            
        }

        function toDub(n) { //補0操作
            if(n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        }

        function toDubms(n) { //給毫秒補0操作
            if(n < 10) {
                return "00" + n;
            } else {
                return "0" + n;
            }

        }
    </script>

</html>

2.setInterval()、clearInterval(var param)

setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式，迴圈呼叫
clearInterval(var param) 方法可取消由 setInterval() 函式設定的定時執行操作，引數必須是由 setInterval() 返回的 ID 值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #mytime {
                background: #bbb;
                color: #fff;
                display: block;
            }
            
            .wrapper {
                text-align: center;
                width: 60%;
                margin: 250px auto;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">
            <h1 id=mytime>顯示時間</h1>
            <button id="stop" name="button" onclick="stop()">stop</button>
            <button id="start" name="button" onclick="start()">start</button>
            <button id="reset" name="button" onclick="reset()">reset</button>
        </div>
    </body>
    <script type="text/javascript">
        var h = m = s = ms = 0; //定義時，分，秒，毫秒並初始化為0；
        var time = 0;

        function timer() { //定義計時函式
            ms = ms + 50; //毫秒
            if(ms >= 1000) {
                ms = 0;
                s = s + 1; //秒
            }
            if(s >= 60) {
                s = 0;
                m = m + 1; //分鐘
            }
            if(m >= 60) {
                m = 0;
                h = h + 1; //小時
            }
            str = toDub(h) + "時" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
            mytime = document.getElementById('mytime');
            mytime.innerHTML = str;
        }

        function reset() { //重置
            clearInterval(time);
            h = m = s = ms = 0;
            document.getElementById('mytime').innerHTML = "00時00分00秒0000毫秒";
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("stop").setAttribute("disabled", true);
        }

        function start() { //開始
            time = setInterval(timer, 50);
            document.getElementById("start").setAttribute("disabled", true);
            document.getElementById("stop").removeAttribute("disabled");
        }

        function stop() { //暫停
            clearInterval(time);
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("stop").setAttribute("disabled", true);
        }

        function toDub(n) { //補0操作
            if(n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        }

        function toDubms(n) { //給毫秒補0操作
            if(n < 10) {
                return "00" + n;
            } else {
                return "0" + n;
            }

        }
    </script>

</html>

JavaScript--定時器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)

1.setTimeout()、clearTimeout(var param) setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式，只調用一次 clearTimeout() 方法可取消由 setTimeout() 方法設定的定時操作，

JavaScript定時器 setTimeout與setInterval 淺析

throttle tin 並不是 tint 導致語句運行應用超過一、前情提要　　1）JavaScript 是運行在單線程的執行環境中的　　2）由瀏覽器安排事件的執行順序二、setTimeout 　　使用場景：設定代碼在未來的某個時間執行，而執行的時機是不

關閉定時器(setTimeout/clearTimeout|setInterval/clearInterval)

　1.1 開啟Timeout程式: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerID 　　1.2 關閉Timeout程式: scope.clearTimeout(timerID); 　　　　2.1 開啟

定時器setTimeout()、setInterval()詳解

setTimeout()用於在指定的毫秒數後呼叫函式或計算表示式 setInterval()在播放動畫的時，每隔一定時間就呼叫函式，方法或物件目錄 JavaScript提供定時執行程式碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函式來完成

javascript-定時器

定時器一、時鐘：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {back

定時器setTimeout/setInterval中變量報錯:not defined 的解決方法

span cor .com ldo href log bug 上下指正首先聲明本人資質尚淺，如有錯誤，歡迎指正、共同提高。 -------------------------------------------------------------------------

JavaScript定時器

語句 ssa clear 引用 element oat cap border width JavaScript定時器恢復 Windows對象包含了4個定時器方法，說明如下表所示： Windows對象定時器方法列表方法說明 setTim

JavaScript定時器實現背景顏色交替變換

style doctype .get code c函數 idt 設置 eight remove 原生JavaScript定時器實現背景顏色交替變換 <!DOCTYPE html> <html lang="zh-cn"> <head&g

js中定時器setTimeout和setInterval兩種定時器

專案中，經常會用到定時器來實現資料實時更新、時間等，簡單總結一下： Javascript中的定時器有兩種，setInterval和setTimeout，而定時器的作用就是延遲執行。一、定時器的寫法 setInterval(expression,milliseconds)；

spring定時器使用註解@Scheduled執行任務，fixedDelay、fixedRate和cron區別

註解@Scheduled 可以作為一個觸發源新增到一個方法中，例如，以下的方法將以一個固定延遲時間5秒鐘呼叫一次執行，這個週期是以上一個呼叫任務的完成時間為基準，在上一個任務完成之後，5s後再次執行：

JavaScript定時器 Math函式

點選學習：2018最牛逼的前端公開課！一定時器 1 、setInterval() setInterval( function(){} , 1000) 多用於動畫第一個引數是一個函式第二引數是時間，表示1秒（1000毫秒

javascript定時器詳解

JS定時器定時器是javascript的重點部分，在以後的很多實戰專案裡都會用到。在javascript中，與定時器有關的方法是： setInterval、clearInterval 以及 setTimeout、clearTimeout 這些方法都是定義在window物件上面的，因此我們寫wi

前端 javascript 定時器

setInterval("執行的程式碼",間隔時間)毫秒單位每5秒一次會提示出彈框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

javascript定時器倒計時自定義時間迴圈

html> head , body...此處省略。。 <div class="TitAlis clearfloat"> <h3>健康團 <span class="hotDp"><a class="fon

HTML5前端教程分享：JavaScript定時器

JS的定時器目前有三個：setTimeout、setInterval和setImmediate。定時器也是一種非同步任務，通常瀏覽器都有一個獨立的定時器模組，定時器的延遲時間就由定時器模組來管理，當某個定時器到了可執行狀態，就會被加入主執行緒佇列。 JS定時器非常實用，

定時器 setTimeOut()

2018年11月07日 14:24:49 chyuzh 閱讀數：1 個人分類：定時器

JavaScript---定時器

開啟定時器 setInterval 間隔型 <script> function show(){ alert("a"); } setInterval(show,1000);//每隔1000ms彈一次視窗，即每隔一秒 </script&g

JavaScript定時器, 點選按鈕,div移動

//定時器, 點選按鈕,div移動 var timer = null; function starMove() { var oDiv = document.getElementById('div1'); timer = setInterval(function() {

移動 Web 與 JavaScript 定時器

文章目錄提醒：本文最後更新於 1700 天前，文中所描述的資訊可能已發生改變，請謹慎使用。在之前部落格中，我曾經寫過「PC 上的 Firefox、Chrome 和 Safari 等瀏覽器，都會自動把未啟用頁面中的 JavaScript 定時器（setTimeout、setInterva

19 01 12 javascript 定時器封閉函式

定時器定時器在javascript中的作用1、製作動畫2、非同步操作3、函式緩衝與節流定時器： setTimeout 只執行一次的定時器 clearTimeout 關閉只執行一次的定時器 setInterval 反覆執行的定時器 clearInterval

JavaScript--定時器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)

1.setTimeout()、clearTimeout(var param)

2.setInterval()、clearInterval(var param)

相關推薦