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>