<!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>
分享到：
相关推荐
javascript进度条实例 进度条加载实例
js进度条
nanobar.js是一款轻量级的纯js进度条插件。这款进度条插件兼容ie8浏览器，它使用简单，并提供一些方法来控制进度条的当前进度。
JS进度条，实现同步增长效果，我觉得很好用，大家可以下载下来试试。
JS导excl和js进度条~!
简单的js进度条，在网络加载时使用，做过渡效果 ，非常适合新手学习参考
各种js进度条，总有一款适合您:)，不下是你的错，下了后悔是我的错！
JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开
javascript进度条
MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作，没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。
通用上传控件JS进度条源码 源码描述： 开发环境：vs2012（源代码复制到其他版本vs也可以用） 浏览器兼容：全部，需要支持Silverlight 技术特点： 单、多文件上传,js进度条，同页面支持无限个 功能描述： 同页面...
js百分比进度条,也就是页面元素之间的嵌套，改变其嵌套元素的宽度进而去实现我们所谓的进度条，也可以使用随机数来进行颜色的填充，当我们的变量为99时候，这样内部的嵌套元素的宽度就达到了外部的宽度，所以就可以...
javascript 进度条 实现客户端进度条显示！
JavaScript进度条，未使用Flash。
因为项目需要，自己开发了一个测试的进度条， 共测试使用。
JS进度条 flash下载进度条 JS下载flash进度条 JS加载Flash JS加载flash进度条 像4399游戏的FLASH进度条
实用JAVASCRIPT进度条 实用JAVASCRIPT进度条 实用JAVASCRIPT进度条
脚本简介：纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效，动态加载效果，背景色动态渐变，纯css+js实现，对于简单页面实现进度条效果可以简单利用此方法。 脚本简介：纯js+css3渐变...
可以在一同页使用多个进度条实例，多个实例间互不影响
js进度条拖动倒影图片放大效果.zip