JS-定时器管理实例

标签：ret   create   变量   doc   speed   return   定时器   set   管理   

/**
 * Created by 12461 on 2016/11/6.
 */
window.onload = function () {
    var oBtn1 = document.getElementById(‘btn1‘);
    var oBtn2 = document.getElementById(‘btn2‘);
    var oDiv = document.getElementById(‘div1‘);
    //外面尽量不要放变量
    // var timer = null;
    oDiv.timer = null;

    oBtn1.onclick = function () {
        //先清除定时器
        clearInterval(oDiv.timer);
        //设置定时器
        oDiv.timer = setInterval(function () {
            //往前跑
            var speed = parseInt(getStyle(oDiv,‘left‘)) + 20 ;
            if (speed > 800){
                speed = 800;
            }
            oDiv.style.left = speed + ‘px‘;
            if (speed >= 800){
                clearInterval(oDiv.timer);
            }
        },30);

    };
    //拿到样式的函数
    function getStyle(obj,attr) {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
};

JS-定时器管理实例

标签：ret   create   变量   doc   speed   return   定时器   set   管理   

原文地址：http://www.cnblogs.com/TianHero/p/6035458.html