JS基础 定时器【setTimeout、setInterval、clearInterval 】

1、setTimeout

　　延迟执行，只执行一次，定时炸弹、炸了就没了

window.setTimeout(function(){要执行的事件},间隔时间毫秒); 

2、setInterval

        无限循环，每一次循环有间隔时间，一般不要小于20毫秒
        它是有返回值的，可以用一个变量来接收这个定时器对象         

window.setInterval(function(){要执行的事件},间隔的时间毫秒);
                                                              

3、clearInterval        

　　关闭定时器      

window.clearInterval(要关闭的定时器对象);

   一旦执行这句代码，会立刻停止此定时器对象的执行

4、offset

　　当前即时的对象的高度、宽带、位置，直接到浏览器上去找

 var v = document.getElementById('a')

v.offsetWidth      // 当前的宽带
v.offsetHeight     // 当前的高度
v.offsetLeft       //当前距离左侧位置
v.offsetTop        //当前距离上方位置
v.offsetParent     //当前起点位置 

实例

 例1、点击按钮，按钮本身的长度发生变化，并且位置移动

 <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>

例2、点击按钮，按钮本身的长度、位置持续变化

<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>

例3、 在例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>

5、计时器

<button id="btn_Phone" click="SetInter()">获取验证码</button>

<script type="text/javascript">

    function SetInter() {
        time = 60;
        $("#btn_Phone").attr("disabled", true);
        var myset = setInterval(
            function countDown() {
                if (time === 0) {
                    $("#btn_Phone").attr("disabled", false);
                    $("#btn_Phone").html("重新获取验证码");
                    clearInterval(myset); 
　　　　　　　　　　　　return;
                }
                else {
                    time--; $('#btn_Phone').html(time + "秒后重新获取");
                }
            }, 1000); 
    }

</script>