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;
0px;
height:20px;
}
.outerClass {
height:20px;
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>