var pro = function (area, pvalue, options) {
this._init(area, pvalue, options);
};
pro.prototype = {
_init: function (area, pvalue, options) {
this.area = $(area);
this.pvalue = $(pvalue);
this._setOption(options);
this.num = 0;
this.time = null;
this.aleng = this.area.width(); //总长度
this.index = this.allTime = this.options.allTime; //总时间
this.step = Math.ceil(this.aleng / this.allTime);
this._HH = parseInt(this.allTime / 60 / 60);
this._MM = parseInt(this.allTime / 60 % 60);
this._ss = parseInt(this.allTime % 60);
this._setTime();
},
_setOption: function (options) {
this.options = {
allTime: 60//单位为秒
};
$.extend(this.options, options || {});
},
_start: function () {
var self = this;
this.time = setInterval(function () {
self._run(self);
}, 1000);
},
_zt: function () {
clearInterval(this.time);
},
_run: function (e) {
e.num += e.step;
this.index--;
if (this.index <= 0) { e.num = e.aleng; clearInterval(e.time); };
if (e._ss > 0) {
e._ss--;
} else if (e._MM > 0) {
e._ss = 59;
e._MM--;
} else if (e._HH > 0) {
e._ss = 59;
e._MM = 59;
e._HH--;
}
e._setTime();
e.pvalue.css("width", e.num + "px");
},
_setTime: function () {
var _strH = this._HH < 10 ? "0" + this._HH : this._HH;
var _strM = this._MM < 10 ? "0" + this._MM : this._MM;
var _strS = this._ss < 10 ? "0" + this._ss : this._ss;
$$P.log("lg", _strH + ":" + _strM + ":" + _strS);
}
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.pro
{
width: 500px;
height: 15px;
border: solid 1px #ccc;
}
.value
{
background-color: #6E96B1;
width: 0px;
height: 100%;
}
</style>
</head>
<body>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../js/jone.js" type="text/javascript"></script>
<script src="progress.js" type="text/javascript"></script>
<div class="pro">
<div class="value">
</div>
</div>
<div id="lg">
</div>
<div id="lg1">
</div>
<div id="lg2">
</div>
<div id="lg3">
</div>
<a href="javascript:;" onclick="proObj._start()">开始</a> <a href="javascript:;" onclick="proObj._zt()">
暂停</a>
<script type="text/javascript">
var proObj = new pro(".pro", ".value", { "allTime": 1 *1175 + 2 });
</script>
</body>
</html>
