CSDN博客

img zlyperson

Javascript制作进度条

发表于2003/10/31 23:01:00  1956人阅读

  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>

<span id="_PercentBar"></span>

<script language="javascript" type="text/javascript" src="percent.js">

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

<table>
 <tr>
  <td>
   <span id="_PercentBar"></span>
  </td>
 </tr>
</table>


<script language="javascript" type="text/javascript" src="percent.js">

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

0 0

相关博文

我的热门文章

img
取 消
img