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

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)

2.setInterval()、clearInterval(var param)

猜你喜欢