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>