标签：javascript
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript">
function showProgressBar(){
//预定义颜色
var colors = ["#5B00AE","#28FF28","#FF8000","#00DB00","#408080","#79FF79"];
//背景层，平铺，灰色，0.33透明度
var divBackground = document.createElement("div");
divBackground.style.position = "absolute";
divBackground.style.top = "0";
divBackground.style.left = "0";
divBackground.style.width = "100%";
divBackground.style.height = "100%";
divBackground.style[‘background-color‘] = "gray";
divBackground.style.opacity = "0.33";
document.body.appendChild(divBackground);
//进度条浮动层，居中
var divFloat = document.createElement("div");
divFloat.style.position = "absolute";
divFloat.style.top = "30%";
divFloat.style.left = "30%";
divFloat.style.width = "40%";
divFloat.innerHTML = ‘处理中...<div style="background-color: gray;width:100%;height:10px;"><div id="progressBar" style="background-color:firebrick;height:10px;"></div></div>‘;
document.body.appendChild(divFloat);
//进度条div dom对象
var progressBar = document.getElementById("progressBar");
var percent = 1;//控制进度条百分比
var count = 0;//控制颜色切换
setInterval(function(){
//如果满了，重新开始并改变颜色
if(percent >=100){
percent = 1;
count++;
progressBar.style[‘background-color‘] = colors[count % colors.length];
}
progressBar.style.width = percent + "%";
percent += 2;
},200);//200毫秒刷新一次
}
</script>
</head>
<body>
<input type="button" value="Click Me" onclick="showProgressBar()"/>
</body>
</html>效果图：
标签：javascript
原文地址：http://lsieun.blog.51cto.com/9210464/1841074
