进度条

最新推荐文章于 2025-01-08 08:22:07 发布

原创最新推荐文章于 2025-01-08 08:22:07 发布 · 729 阅读

CC 4.0 BY-SA版权

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>