javascript 进度条的几种方法

站长资源 2026/9/5 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

我们先看看最终效果：

第一步，基本
构建基本的代码，看效果演示：
<!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; height:16px; width:150px; border:1px solid #bbb; color:#222; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0; } </style> </head> <body> <h1>1，构建基本的HTML结构和CSS样式</h1> 0%的状态： 50%的状态： 80%的状态： 100%的状态：这步非常简单，相信大家都能看明白。 </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; } /*进度条样式*/ .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> <h1>2，给进度条增加文字显示</h1> 一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。接下来，我们在进度条元素内增加一个显示文字的div。很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子： 50% 那么有什么办法使得文字和绿色进度条同时显示在一起呢？估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。看下面的例子： 50% 这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子： 50% 80% 100% 这是第一种方式，也是目前最为流行的制作进度条的方式。他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。 </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> <h1>3，制作进度条的第二种方式---直接使用图片+背景图片</h1> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。对，就是使用绝对定位+相对定位来控制。 0% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 20% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 50% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 80% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 100% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。总的来说，这应该算一个技巧，在实际项目中，也是能使用的。 <p>Dev By jb51.net</p> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。
当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制更精确，比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。

第四步，应用
最后我们看一个简单的应用：
<!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> <h1>4，应用</h1> 0% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <button id="addTo" >增加至50%</button> <button id="cutdown" >减少至20%</button> 我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。 <p>Dev By jb51.net</p> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
文件打包下载

javascript,进度条

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“javascript 进度条的几种方法”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

javascript 进度条的几种方法

Jquery中的offset()和position()深入剖析

JS 文字符串转换unicode编码函数

评论“javascript 进度条的几种方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

javascript 进度条的几种方法

Jquery中的offset()和position()深入剖析

JS 文字符串转换unicode编码函数

评论“javascript 进度条的几种方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存