进度条

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>

 

你可能感兴趣的:(进度条)