您的位置：首页 > Web前端 > JavaScript

Javascript实现一个进度条

2016-08-22 14:39 211 查看

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

相关文章推荐

新的分享

章节导航