progress bar

辛可人

2023-12-01

<!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>

progress bar

相关阅读

相关文章

相关问答