javascript 进度条的几种方法

更新时间：2009年05月31日 00:12:57 作者：

在实际项目中，进度条的用处还是非常大的。这篇文章主要是要介绍几种制作进度条的方法。通过学习，你也能制作属于自己的进度条了。

我们先看看最终效果：

第一步，基本
构建基本的代码，看效果演示：

第二步，给进度条增加文字显示

<!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> <title>制作进度条的两种方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*进度条样式*/ .progressbar_1{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb; } .progressbar_1 .bar {     background-color:#6CAF00;     height:16px;     width:0; } /*绝对定位*/ .progressbar_2{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb;     text-align:center;     position:relative; } .progressbar_2 .bar {     background-color:#6CAF00;     height:16px;     width:0;     position:absolute;     left:0;     top:0; } .progressbar_2 .text {     height:16px;     position:absolute;     left:0;     top:0;     width:100%;     line-height:16px; } /*绝对定位 + z-index */ .progressbar_3{     background-color:#eee;     color:#222;     height:16px;     width:150px;     border:1px solid #bbb;     text-align:center;     position:relative; } .progressbar_3 .bar {     background-color:#6CAF00;     height:16px;     width:0;     position:absolute;     left:0;     top:0;     z-index:10; } .progressbar_3 .text {     height:16px;     position:absolute;     left:0;     top:0;     width:100%;     line-height:16px;          z-index:100; } </style> </head> <body> <div class="wrap">     <h1>2，给进度条增加文字显示</h1>               一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。     接下来，我们在进度条元素内增加一个显示 文字的div。          很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子：               <div class="progressbar_1">         <div >50%</div>         <div class="bar" style="width: 50%;"></div>     </div>          那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？          估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。          看下面的例子：          <div class="progressbar_2">         <div class="text">50%</div>         <div class="bar" style="width: 50%;"></div>     </div>          这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。     对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：     <div class="progressbar_3">         <div class="text">50%</div>         <div class="bar" style="width: 50%;"></div>     </div>          <div class="progressbar_3">         <div class="text">80%</div>         <div class="bar" style="width: 80%;"></div>     </div>          <div class="progressbar_3">         <div class="text">100%</div>         <div class="bar" style="width: 100%;"></div>     </div>          这是第一种方式，也是目前最为流行的 制作进度条的方式。     他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。     接下来我们看第二种方式制作进度条。           </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。
第三步，制作进度条的第二种方式---直接使用图片+背景图片

<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{     margin:0;     padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{     font-size: 12px;     margin:40px auto;     width:400px; } /*不带文字*/ .progress{     border:0;     width: 152px;     height: 18px;     background:url(img/progress.gif) no-repeat -100px 50%; } /*带文字显示*/ .progressbar_3{     width:152px;     position:relative;     height:18px;     text-align:center;     position:relative;     color:#222; } .progressbar_3 .text{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     line-height:18px;     z-index:100; } .progressbar_3 .progress{     width:152px;     position:absolute;     left:0;     top:0;     height:18px;     z-index:10; } </style> </head> <body> <div class="wrap">     <h1>3，制作进度条的第二种方式---直接使用图片+背景图片</h1>               <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>                   <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>               <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>               <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>          <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/>               如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。     对，就是使用绝对定位+相对定位来控制。          <div class="progressbar_3">         <div class="text">0%</div>         <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>     </div>          <div class="progressbar_3">         <div class="text">20%</div>         <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>     </div>          <div class="progressbar_3">         <div class="text">50%</div>         <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>     </div>          <div class="progressbar_3">         <div class="text">80%</div>         <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>     </div>          <div class="progressbar_3">         <div class="text">100%</div>         <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/>     </div>          这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。     当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。     另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。     总的来说，这应该算一个技巧，在实际项目中，也是能使用的。          <p style="float:right;">Dev By <a href="https://www.jb51.net" >jb51.net</a></p>           </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。
当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制更精确，比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。

第四步，应用
最后我们看一个简单的应用：

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
文件打包下载

您可能感兴趣的文章:

js对象合并的4种方式与数组合并的4种方式
这篇文章主要介绍了js对象合并的4种方式与数组合并的4种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
jQuery $.data()方法使用注意细节
前段时间同事在群里对jQuery里的.data()方法接下来介绍jQuery $.data()方法使用注意细节,需要了解的朋友可以参考下
2012-12-12
微信小程序实现随机验证码
这篇文章主要为大家详细介绍了微信小程序实现随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
Ajax+FormData+javascript实现无刷新表单信息提交
在前端开发中ajax，formdata和js实现无刷新表单信息提交非常棒，接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下
2016-10-10
如何遍历对象的属性?
如何遍历对象的属性?...
2006-09-09
js实现完美兼容各大浏览器的人民币大小写相互转换
在基于网页的打印输出或报表中，经常会牵扯到金额的大写，每次都打上去很麻烦，所以想法用一个JavaScript客户端脚本来实现自动转换，只需在需要显示大写金额的时候调用该JS函数，下面我们就来汇总下吧
2015-10-10
原生JS实现简单的倒计时功能示例
这篇文章主要介绍了原生JS实现简单的倒计时功能,涉及javascript基于定时器的日期时间运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2018-08-08
java、javascript实现附件下载示例
在web开发中，经常需要开发“下载”这一模块,下面使用java、javascript实现附件下载,需要的朋友可以参考下
2014-08-08
微信小程序如何获取用户头像和昵称
这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
mpvue微信小程序的接口请求fly全局拦截代码实例
这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11

javascript 进度条的几种方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具