前臺更新進度條js-3

$ = function (id) {
return document.getElementById(id);
}
//文本轉JSON字符串
String.prototype.toJson = function () {
if (this == ) {
return null;
}
else {
try {
return eval(( + this.replace(/rn/g, rn) + ));
}
catch (err) {
}
}
};
//字符格式化方法
String.prototype.format = function () {
var newStr = this;
var reg = null;
for (var i = 0; i < arguments.length; i++) {
reg = RegExp('{' + (i) + '}', 'gm');
newStr = newStr.replace(reg, arguments[i]);
}
return newStr;
};
//進度條類
function Progress(objId) {
//window.setInterval對象
this.interval = null;
//進度條對象ID
this.id = objId;
//當前進度 起始進度爲0
this.progress = 0;
//進度條顯示進度的DIV ID
this.progressId = inner + this.id;
//進度條邊框ID
this.progressFrameId = frame + this.id;
//進度條類參數配置
this.config = {
//寬度
width: 150,
//高度
height: 20,
//左邊距
left: 0,
//頂部邊距
top: 0,
//進度顏色
progressColor: red,
//邊框顏色
borderColor: #ccc,
//邊框寬度
borderHeight: 2,
//進度完成後間隔N秒後隱藏進度條 0爲當即隱藏
hiddenSplit:2000
};
}
//進度條類初始化方法
Progress.prototype.init = function () {
//新建進度條邊框DIV
var progressdiv = document.createElement(div);
//邊框DIV樣式
var progressdiv_css_text = position:absolute;width:{0}px;height:{1}px;left:{2}px;top:{3}px;border:{4} {5}px solid;.format
(
this.config.width,
this.config.height,
this.config.left,
this.config.top,
this.config.borderColor,
this.config.borderHeight
);
//重置進度爲0
this.progress = 0;
//設置邊框ID
progressdiv.id = this.progressFrameId;
//設置邊框樣式
progressdiv.style.cssText = progressdiv_css_text;
//設置進度條HTML
progressdiv.innerHTML = '

'.format(this.progressId, this.config.height, this.config.progressColor);
//加入body中
document.body.appendChild(progressdiv);
};
//進度條隱藏函數
Progress.prototype.hiddenProgress = function () {
document.body.removeChild(document.getElementById(this.progressFrameId));
window.clearInterval(this.interval);
}
//進度結束時觸發的函數
Progress.prototype.complete = function () {
window.clearInterval(this.interval);
this.interval = window.setTimeout(this.id+.hiddenProgress();,this.config.hiddenSplit);
if (this.completeCallBack) {
this.completeCallBack();
}
}
//進度每次運行後的回調函數
Progress.prototype.callback = function () {
var progressDiv = document.getElementById(this.progressId);
var progressFrameDiv = document.getElementById(this.progressFrameId);
progressDiv.innerHTML = (this.progress*100)+ %;
progressFrameDiv.title = 上傳進度: + (this.progress*100) + %;
progressDiv.style.width = (this.progress*100) + %;
if (this.progress >= 1) {
this.complete();
progressDiv.innerHTML = 文件上傳成功!;
}
}
//進度條運行函數。須要用戶本身實現
Progress.prototype.run = function () {
alert(請實現 + this.id + .run方法以實現異步進度請求，回發回請調回調 + this.id + .callback方法。);
window.clearInterval(this.interval);
}
//啓動進度
Progress.prototype.start = function () {
this.init();
this.interval = window.setInterval(this.id + .run(), 1000);
}