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

js 进度条

2010-03-16 11:19 120 查看

<!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=gb2312" />
<title>progress</title>
<script language="javascript">
//进度条对象
//参数id: 包容进度条的框架元素ID
var ProgressBar = function(id){
var bar = this;
this.width = 300; this.height = 8;//进度条的宽度和高度
this.bgcolor = "white"; this.barcolor = "lightblue";//进度条的背景色和前景色
this.fontSize = 12; this.fontColor = "blue";//文字的字号和颜色
//初始化进度条
this.init = function(){
var otable = document.createElement("TABLE");
otable.setAttribute("bgColor", bar.bgcolor);
otable.setAttribute("cellpadding", 0);
otable.setAttribute("cellspacing", 0);
otable.style.cssText = "width:" + parseInt(bar.width) + "px; height:" + parseInt(bar.height) + "px; border:0; border-collapse:collapse;";

var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.setAttribute("padding", 0);
otd.setAttribute("width", "100%");
otr.appendChild(otd);

var itable = document.createElement("table");
itable.setAttribute("id", "tb_bar");
itable.setAttribute("height", "100%");
itable.setAttribute("align", "left");
itable.setAttribute("bgColor", bar.barcolor);
itable.setAttribute("width", 0);
otd.appendChild(itable);

var itr = itable.insertRow(-1);
var itd = document.createElement("td");
itr.appendChild(itd);

var tb = document.createElement("TABLE");
tb.style.cssText ="border:0; border-collapse:collapse; cellpadding:0; cellspacing:0";
var tr = tb.insertRow(-1);
var ltd = document.createElement("td");
ltd.appendChild(otable);
var rtd = document.createElement("td");
var font = document.createElement("FONT");
font.setAttribute("id", "font_progress");
font.style.fontSize = parseInt(bar.fontSize) + "px";
font.style.color = bar.fontColor;
font.innerHTML = "0%";
rtd.appendChild(font);
tr.appendChild(ltd);
tr.appendChild(rtd);

document.getElementById(id).appendChild(tb);
}
//设置进度条的进度
//参数progress: 进度，取值范围0-100之间的整数
this.setProgress = function(progress){
if(progress >=100){progress = 100;}
var itable = document.getElementById("tb_bar");
itable.setAttribute("width", (parseInt(progress) + "%"));
var font = document.getElementById("font_progress");
font.innerHTML = parseInt(progress) + "%";
}
}
</script>
</head>

<body>
<div id="pb">
<script language="javascript">
var bar = new ProgressBar("pb");
bar.bgcolor = "gray";
bar.fontColor = "red";
bar.init();

var progress = 1;
var timer = window.setTimeout(setPb, 100);
function setPb(){
progress = progress + 1;
if(progress >= 100){
window.clearTimeout(setPb);
}
bar.setProgress(progress);
timer = window.setTimeout(setPb, 100);
}
</script>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航