js的进度条

<!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>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>js进度条</title>
< style>
.holder{
position:absolute; border:solid #FF00ff 1px; height:20px;
}
div .bar {
background-color:#0033ff; height:20px;
}
< /style>
< script>
//处理类中的this变化问题
Function.prototype.Bind = function(){
var __m = this, object = arguments[0], args = new Array();
for(var i = 1; i < arguments.length; i++){
args.push(arguments[i]);
}
return function(){
return __m.apply(object, args);
}
}

var ProgressBar = function(){
this.init.call(this);
}
ProgressBar.prototype = {
init: function(){
this.holder = document.createElement('div');
this.bar = document.createElement('div');
this.holder.appendChild(this.bar);
this.holder.className = 'holder';
this.bar.className = 'bar';
this.bar.style.width = '0px';
this.holder.style.width = '300px';
this.timer;
},
display: function(){
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ?
document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ?
document.documentElement.clientHeight : document.body.offsetHeight;
this.holder.style.top = h/2 + 'px';
this.holder.style.left = w/2 + 'px';
document.body.appendChild(this.holder);
this.timer=setInterval(this.increase.Bind(this), 500);
},
increase: function(){
var barWidth = parseInt(this.bar.style.width) + 10;
var holderWidth = parseInt(this.holder.style.width);
barWidth = Math.min(barWidth, holderWidth);
this.bar.style.width = barWidth + 'px';
if (barWidth == holderWidth) {
clearInterval(this.timer);
this.end();
}
},
end: function(){
alert("更新文章完成!");
document.body.removeChild(this.holder);
}
}

//执行进度条
function publishColumn(){
var progressBar = new ProgressBar();
progressBar.display();
}
< /script>
< /head>

<body>
< form>
< input type="button" value="更新栏目文章" onclick="publishColumn()">
< /form>


< /body>
< /html>

你可能感兴趣的:(js)