<script type="text/javascript">
(function(){
var doc = document;
var b=0, t=0;
var cle;
function gId(id){
return doc.getElementById(id);
}

var tweenBtn = function(){
this._btn = gId('btn');
this._bar = gId('bar');
this._bp  = gId('bp');
this.init()
} tweenBtn.prototype = {
init:function(){
var _self = this;
_self._btn.onclick = function(){
_self.clk();
}
_self.go();
},
clk:function(){
var _self = this;
t = 0;
_self.toStart();
clearTimeout(cle);
_self.go();
},
toStart:function(){
gId('bp').style.left = '0px';
},
go:function(){
var _self = this;
var s = _self._bar.offsetWidth;
function _go() {
_self.go();
}
if(t<s) {
t++;
cle = setTimeout(_go,10);
}
gId('bp').style.left = t + 'px';
}
}; new tweenBtn();
}());
</script>
问题:求解这段javascript代码神马意思??
最终效果图

解决方案 »

  1.   


    (function(){
    var doc = document;
    var b=0, t=0;
    var cle;
    // 根据id获取dom元素
    function gId(id){
    return doc.getElementById(id);
    }; // 创建一个表示中间按钮的类
    var tweenBtn = function(){
    this._btn = gId('btn');
    this._bar = gId('bar');
    this._bp  = gId('bp');
    this.init()
    }; // 类的属性
    tweenBtn.prototype = {
    init:function(){
    var _self = this;
    _self._btn.onclick = function(){
    _self.clk();
    };
    _self.go();
    },
    // 重新开始
    clk:function(){
    var _self = this;
    t = 0;
    _self.toStart();
    clearTimeout(cle);
    _self.go();
    },
    toStart:function(){
    gId('bp').style.left = '0px';
    },
    // 开始进行滚动
    go:function(){
    var _self = this;
    var s = _self._bar.offsetWidth;
    function _go() {
    _self.go();
    };
    if(t<s) {
    t++;
    //  _go 10ms后  自调
    cle = setTimeout( _go , 10 );
    };
    gId('bp').style.left = t + 'px';
    }
    };
    new tweenBtn();
    }());