Javascript制作进度条

原创 2003年10月31日 23:01:00

  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>

html js 定制进度条 (一)

最近模仿海康的存储设备录像回放的进度条,由于本人是C语言程序员,对js一知半解还好有网络支持,马马虎虎实现了基本功能。解决问题思路,使用第三方的矢量图库。感谢博主(dmacy):http://blog...
  • zhujinghao09
  • zhujinghao09
  • 2016年09月14日 23:00
  • 1631

Unity3D NGUI制作进度条

利用GUI可以制作进度条,但是NGUI更加
  • G__Dragon
  • G__Dragon
  • 2014年07月21日 10:12
  • 3742

canvas+js实现进度条

本案例主要用到canvas的一些基本的画布操作,难度不是很大,主要是要熟悉js中的模块模式的写法,学会面向对象的写法对代码的维护和可读性都有很大好处. 效果图: html代码: js...
  • jian_xi
  • jian_xi
  • 2016年12月01日 21:53
  • 1273

JavaScript制作进度条实例

  • 2008年09月13日 20:22
  • 2KB
  • 下载

JavaScript模拟进度条

  • 2013年03月19日 09:25
  • 2KB
  • 下载

javascript+HTML5 多文件上传(插件)多进度条显示

  • 2015年02月06日 09:38
  • 2KB
  • 下载

用 Javascript 模拟 Vista 风格进度条

  • 2007年09月28日 16:01
  • 5KB
  • 下载

javascript进度条实现

  • 2012年08月12日 11:15
  • 3KB
  • 下载

四种进度条倒计时-javascript-svg-html5打包共享

  • 2017年03月15日 12:57
  • 51KB
  • 下载

javascript进度条

  • 2015年09月23日 13:25
  • 944B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript制作进度条
举报原因:
原因补充:

(最多只允许输入30个字)