JS基礎 定時器【setTimeout、setInterval】

一、setTimeout

　　延遲執行，只執行一次，定時炸彈、炸了就沒了

window.setTimeout(function(){要執行的事件},間隔時間毫秒); 

 

二、setInterval

        無限循環，每一次循環有間隔時間，通常不要小於20毫秒
        它是有返回值的，能夠用一個變量來接收這個定時器對象         

window.setInterval(function(){要執行的事件},間隔的時間毫秒);
                                                              

三、clearInterval        

　　關閉定時器      

window.clearInterval(要關閉的定時器對象);

   一旦執行這句代碼，會馬上中止此定時器對象的執行

 

四、offset

　　當前即時的對象的高度、寬帶、位置，直接到瀏覽器上去找

 var v = document.getElementById('a')

v.offsetWidth      // 當前的寬帶
v.offsetHeight     // 當前的高度
v.offsetLeft       //當前距離左側位置
v.offsetTop        //當前距離上方位置
v.offsetParent     //當前起點位置 

 

實例

 例一、點擊按鈕，按鈕自己的長度發生變化，而且位置移動

 <input type="button" value="按鈕" id="a" />

<script type="text/javascript"> 
    var v = document.getElementById('a') 
    v.onclick = function () { 
        v.style.width = v.offsetWidth + 100 + "px";    //長度改變 
        v.style.left = v.offsetLeft + 100 + "px";      // 位置移動,位置發生改變時必需要有定位 +100向右移動，-100向左移動
    } 
</script>

 

例二、點擊按鈕，按鈕自己的長度、位置持續變化

<input type="button" value="按鈕" id="a" />

<script type="text/javascript"> 
    var v = document.getElementById('a') 
    v.onclick = function () {
        window.setInterval(function () {
             v.style.width = v.offsetWidth + 10 + "px";
             v.style.left = v.offsetLeft + 10 + "px";
        }, 20)      
    } 
</script>

 

例三、 在例2的基礎上讓定時器停下

<input type="button" value="按鈕" id="a" />

<script type="text/javascript"> 
    var v = document.getElementById('a') 
       v.onclick = function () { 
       var t=  window.setInterval(function () {  //先用 var t 接收 window.setInterval 的值，這個值就是定時器對象 
            if (v.offsetLeft >500)
            {
                window.clearInterval(t)
            } 
            v.style.width = v.offsetWidth + 10 + "px"; 
            v.style.left = v.offsetLeft + 10 + "px";
        }, 20)     
    } 
</script>