JavaScript实现进度条的几种方法介绍

来源：动视网责编：小采时间：2020-11-27 20:11:06

JavaScript实现进度条的几种方法介绍

JavaScript实现进度条的几种方法介绍:我们在之前的文章给大家介绍了关于JavaScript实现进度条的实例，我们都知道在实际项目中，进度条的用处还是非常大的，今天我们就大家继续介绍下JavaScript实现进度条的有哪几种方式！我们先看看最终效果：第一步，基本构建基本的代码，看效果演示： <

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现进度条的几种方法介绍:我们在之前的文章给大家介绍了关于JavaScript实现进度条的实例，我们都知道在实际项目中，进度条的用处还是非常大的，今天我们就大家继续介绍下JavaScript实现进度条的有哪几种方式！我们先看看最终效果：第一步，基本构建基本的代码，看效果演示： <

我们在之前的文章给大家介绍了关于JavaScript实现进度条的实例，我们都知道在实际项目中，进度条的用处还是非常大的，今天我们就大家继续介绍下JavaScript实现进度条的有哪几种方式！

我们先看看最终效果：

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

<!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> 
<div class="wrap"> 
 <h1>1，构建基本的HTML结构和CSS样式</h1> 
 

 
 0%的状态： 
 <div class="progressbar_1"> 
 <div class="bar"></div> 
 </div> 
 

 
 50%的状态： 
 <div class="progressbar_1"> 
 <div class="bar" style="width: 50%;"></div> 
 </div> 
 

 
 80%的状态： 
 <div class="progressbar_1"> 
 <div class="bar" style="width: 80%;"></div> 
 </div> 
 
 

 
 100%的状态： 
 <div class="progressbar_1"> 
 <div class="bar" style="width: 100%;"></div> 
 </div> 
 
 
 这步非常简单，相信大家都能看明白。 
</div> 
</body> 
</html>

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

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

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

<!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="http://www.gxlcms.com" >jb51.net</a></p> 
</div> 
</body> 
</html>

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

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

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="gb2312"></script> 
<script> 
$(function(){ 
 var $txt = $(".progressbar_3 .text"); 
 var $progress = $(".progressbar_3 .progress"); 

 $("#addTo").click(function(){ 
 $progress.animate({"backgroundPosition":"-76px 50%"},500,function(){ 
 $(this).attr({"alt":"50%","title":"50%"}); 
 $txt.text("50%"); 
 $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
 }); 
 }); 
 $("#cutdown").click(function(){ 
 $progress.animate({"backgroundPosition":"-120px 50%"},500,function(){ 
 $(this).attr({"alt":"20%","title":"20%"}); 
 $txt.text("20%"); 
 $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
 }); 
 }); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
 <h1>4，应用</h1> 
 <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> 
 <button id="addTo" >增加至50%</button> 
 <button id="cutdown" >减少至20%</button> 
 我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。
 当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。 
 <p style="float:right;">Dev By <a href="http://www.gxlcms.com" >jb51.net</a></p> 
 </div> 
</body> 
</html>

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

总结：

通过本文的学习相信小伙伴们对JavaScript实现进度条的方法有了进一步的了解，每个方法都有不同，小伙伴们可以根据自己的需求选择合适的方法！

JavaScript实现进度条的几种方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：进度条 js 的方式

热门焦点

JavaScript实现进度条的几种方法介绍

JavaScript实现进度条的几种方法介绍

JavaScript实现进度条的几种方法介绍

最新推荐

猜你喜欢

热门推荐