Javascript制作进度条

来源：互联网发布：mac 搜狗输入法不见了编辑：程序博客网时间：2024/05/01 04:36

Javascript制作进度条
这篇文章将详细描述应用Javascript制作两种类型的进度条，并且将核心代码包装起来。放在percent.js

/**
* 绘制简单百分比进度条
* barId 进度条span的ID
* fPercent 完成的百分数
* strCaption 标题
* iHeight 高度
* iUnit 最小单位
* bgcolor 背景颜色
* border 边框样式
* cursor 光标样式
*/
function SimplePercent(barId, fPercent, strCaption, iHeight, iUnit, bgcolor, border, cursor) {
var pBar = document.all(barId);
if (pBar)
{
  pBar.title = strCaption + fPercent + "%";
  pBar.innerHTML = "";
  if (bgcolor){
   pBar.style.backgroundColor = bgcolor;
  }
  if (border == null){
   border = "1px solid #000000";
  }
  pBar.style.border = border;
  if (cursor == null){
   cursor = "default";
  }
  pBar.style.cursor = cursor;

  if (iHeight == null || iHeight < 1){
   iHeight = 1;
  }
  pBar.style.height = iHeight + "px";
  if (iUnit == null || iUnit < 1){
   iUnit = 1;
  }
  pBar.style.width = (iUnit * 100) + "px";

  pBar.insertAdjacentHTML("BeforeEnd", "<span style='width:"+(iUnit*fPercent)+"px;height:"+iHeight+"px;background-color:#0000FF;'></span>");

}
}
实例：
<html>
<head>
<title>绘制简单百分比进度条</title>
</head>
<body>

</script>
<script language="javascript" type="text/javascript">
SimplePercent("_PercentBar", 77, "安装进度",10, 5);
</script>
</body>
</html>

/**
* 百分比进度
*/
var _Hex = Array("00","01","02","03","04","05","06","07","08","09","0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19","1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29","2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39","3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49","4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59","5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69","6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79","7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89","8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99","9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9","AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9","BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9","CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9","DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9","EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9","FA","FB","FC","FD","FE","FF");

/**
* 绘制渐变百分比进度条
* barId 进度条span的ID
* fPercent 完成的百分数
* strCaption 标题
* bDouble 100 or 200单位
* iUnit 最小单位
* bgcolor 背景颜色
* border 边框样式
* cursor 光标样式
*/
function PaintPercent(barId, fPercent, strCaption, bDouble, iHeight, iUnit, bgcolor, border, cursor) {
var pBar = document.all(barId);
if (pBar)
{
  pBar.title = strCaption + fPercent + "%";
  pBar.innerHTML = "";
  if (bgcolor){
   pBar.style.backgroundColor = bgcolor;
  }
  if (border == null){
   border = "1px solid #000000";
  }
  pBar.style.border = border;
  if (cursor == null){
   cursor = "default";
  }
  pBar.style.cursor = cursor;

  if (iHeight == null || iHeight < 1){
   iHeight = 1;
  }
  pBar.style.height = iHeight + "px";
  if (iUnit == null || iUnit < 1){
   iUnit = 1;
  }
  if (bDouble){
   bDouble = 2;
  }
  else{
   bDouble = 1;
  }

pBar.style.width = (iUnit * bDouble * 100) + "px";
pBar.style.whiteSpace = "nowrap";

  for(var idx = 0; idx < bDouble* 100; idx ++){
   if (idx < fPercent*bDouble){
    pBar.insertAdjacentHTML("BeforeEnd", "<span style='width:"+iUnit+"px;height:"+iHeight+"px;background-color:#00"+_Hex[256-idx]+"FF;'></span>");
   }else{
    pBar.insertAdjacentHTML("BeforeEnd", "<span style='width:"+iUnit+"px;height:"+iHeight+"px'></span>");
   }
  }
}
}
实例：
<html>
<head>
<title>绘制渐变百分比进度条</title>
</head>
<body>

</script>
<script language="javascript" type="text/javascript">
PaintPercent("_PercentBar", 89, "安装进度",true,18);
</script>
</body>
</html>