幾個例子弄懂JS 的setInterval的運行方式

時間 2019-11-20

標籤幾個例子弄懂 setinterval 運行方式欄目 JavaScript 简体版

原文原文鏈接

　　這篇文章主要介紹了js的setInterval方法的用法以及示例，很是的有用，這裏推薦給小夥伴們。　javascript

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
　　setinterval()用法css

　　setInterval(code,millisec[,"lang"])html

　　後面就兩個參數code是你的js代碼，millisec爲時間間隔，以毫秒計java

　　案例一：滾動條的控制函數

        <script type="text/javascript">
            var t = setInterval(function(){
                window.scrollBy(0,20);
                console.log(document.body.scrollTop);
                if(document.body.scrollTop || document.documentElement.scrollTop >= 100){
                    clearInterval(t);
                }
            }, 1000);
        </script>

　　案例二：頁面顯示時間spa

<html>
    <head>
        <meta charset="UTF-8">
        <title>setInterval案例</title>
    </head>
    <body style="height: 2000px">
        <input type="text" name="clock" id="clock" value="" style="width: 500px;"/>
        <button id="stop" onclick="timer=window.clearInterval(timer)">中止時間函數</button>
        <script type="text/javascript">
            function clock(){
                var t = new Date();
                document.getElementById('clock').value = t;
            }
            var timer = setInterval(clock, 50);
            var stop = document.getElementById('stop');
            stop.onclick = function(){
                clearInterval(timer);
            }
        </script>
    </body>
</html>

　　案例三：code

            function show(){
                console.log("每隔一秒我就會顯示一次");
            }
            var sh;
            sh=setInterval(show,1000);
            
            clearInterval(sh);

　　案例四：相似於廣告彈窗的效果；htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>setInterval案例</title>
    </head>
    <style type="text/css">
        #content{
            position:relative; 
            height: 500px; 
            width: 500px; 
            background-color: #666;
        }
        #one{
            position: absolute;
            top: 0px; 
            left: 0px; 
            height: 100px; 
            width: 100px; 
            background-color: red;
            font-size: 50px;
            line-height: 50px;
            text-align: right;
            color: #fff;
        }
    </style>
    <body>
         <div id="content">
            <div id="one"><div id="close">X</div></div>
        </div>
        <p>距離國慶節還有</p>
        <script>
            var content = document.getElementById('content');
            var one = document.getElementById('one');
            var close = document.getElementById('close');
            var x=0;
            var y=0;
            var xs=10;
            var ys=10;
            function scroll(){
                x += xs;
                y += ys;
                if(x >= content.offsetWidth-one.offsetWidth || x <= 0){
                    xs = -1 * xs;
                }
                if(y >= content.offsetHeight-one.offsetHeight || y<=0){
                    ys = -1 * ys;
                }
                one.style.left = x + 'px';
                one.style.top = y + 'px';
            }
            var dt = setInterval(scroll, 100);
            one.onmouseover = function(){
                clearInterval(dt);    
            };
            one.onmouseout = function(){
                dt = setInterval(scroll,100);
            };
            close.onclick = function(){
                one.style.display = 'none';
            }
        </script>
    </body>
</html>