进度条

来源：互联网发布：淘宝满就包邮怎么设置编辑：程序博客网时间：2024/06/05 13:22

var ProgressBar = function (divObj,innerClass,outerClass,time) {    var _self = this;    //缓存宽度，以及内联Div    var _outerWidth,_innerDiv;    //div容器    _self._divObj = divObj;    //内围divClass    _self._innerClass = innerClass;    //外围DivClass    _self._outerClass = outerClass;    //总时间    _self._time = time;    //设置内围Class    _self.SetInnerClass = function (innerClass) {        _self._innerClass = innerClass;      }    //完成时回调    _self.completed = function (callback) {        if (typeof callback == 'function') {            _self._completed = callback;        } else {            throw new Error('callback must be a function type');        }    }    //间隔执行函数，每个interval回调一次    _self.intervalFn = function (interval, callback) {        if (typeof interval == 'number' && typeof callback == 'function') {            if (interval % 10 == 0) {                _self._intervalFn = callback;                _self._interval = interval;            } else {                throw new Error('interval must be divied with no remainder 10');            }        } else {            throw new Error('callback must be a function type and the interval must be a Number type');        }    }    if (typeof ProgressBar._initialized == 'undefined') {                //绘制div        ProgressBar.prototype._html = function () {            var html = [];            html.push('<div class="');            html.push(_self._outerClass);            html.push('"><div class="');            html.push(_self._innerClass);            html.push('"> </div><div/>');            return html.join('');        }        //初始化        ProgressBar.prototype.init = function () {            _self._divObj.append(_self._html());            _outerWidth = _self._divObj.find('div.' + _self._outerClass).width();            _innerDiv = _self._divObj.find('div.' + _self._innerClass);        }        //重置        ProgressBar.prototype.reset = function () {            _innerDiv.css('width', 0);        }        //执行间隔回调        ProgressBar.prototype._evalIntervalFn = function (curTime) {            if (typeof _self._intervalFn != 'undefined') {                if (curTime % _self._interval == 0) {                    _self._intervalFn(curTime);                }            }        }               //运行        ProgressBar.prototype.run = function () {            if (typeof _outerWidth == 'undefined') {                _self.init();            }            var evalRate = 10;//执行频率            var speed = _outerWidth / _self._time * evalRate;            var width = 0;            var curTime = 0;            var interval = window.setInterval(function () {                width = width + speed;                //执行间隔回调                curTime += evalRate;                _self._evalIntervalFn(curTime);                if (width < _outerWidth) {                    _innerDiv.css('width', width);                } else if(width>=_outerWidth){                    _innerDiv.css('width', _outerWidth);                    //完成回调                    if (typeof _self._completed != 'undefined') {                        _self._completed();                    }                    clearInterval(interval);                }            }, evalRate);        }        ProgressBar._initialized = true;    }}

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="jquery-1.7.2.min.js"></script>    <script src="ProgressBar.js"></script>    <style type="text/css">        .innerClass {            background-color:red;            width:0px;            height:20px;        }        .outerClass {            height:20px;            width:513px;            border:1px solid blue;            background-color:blue;        }    </style>    <script type="text/javascript">        $(function () {            var progress = new ProgressBar($("#test"), 'innerClass', 'outerClass', 5000);            progress.run();            progress.completed(function () {                alert('已完成');            });            progress.intervalFn(990, function (curTime) {                console.log(curTime);            });        });    </script></head><body>    <div id="test"></div><span id="test1"></span></body></html>

0 0