>  기사  >  웹 프론트엔드  >  JavaScript에서 진행률 표시줄을 구현하는 여러 방법 소개

JavaScript에서 진행률 표시줄을 구현하는 여러 방법 소개

黄舟
黄舟원래의
2017-11-21 09:54:038421검색

이전 기사에서 진행률 표시줄의 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>

두 번째 단계는 텍스트 표시를 추가하는 것입니다. the 진행률 표시줄

<!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"    style="max-width:90%" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>          
       <img class="progress" width="152"    style="max-width:90%" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/> 
        <img class="progress" width="152"    style="max-width:90%" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/> 
         <img class="progress" width="152"    style="max-width:90%" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/> 
        <img class="progress" width="152"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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"    style="max-width:90%" 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.jb51.net" >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"    style="max-width:90%" 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.jb51.net" >jb51.net</a></p> 
    </div> 
</body> 
</html>

진행률 표시줄 효과를 얻으려면 애니메이션을 사용하여 이미지의 배경 위치를 제어하세요.
물론 첫 번째 방법을 사용할 수도 있습니다. 첫 번째 방법에서 변경해야 할 것은 진행률 표시줄의 너비 속성입니다.

요약:

친구들은 이 글을 공부함으로써 JavaScript로 진행률 표시줄을 구현하는 방법을 더 잘 이해할 수 있을 것이라고 믿습니다. 각 방법은 각자의 필요에 따라 적절한 방법을 선택할 수 있습니다. .

관련 권장 사항:

진행률 표시줄을 구현하는 JavaScript 기본 코드


JS 기본 업로드 대용량 파일 표시 진행률 표시줄 - PHP 업로드 파일


타이머를 기반으로 진행률 표시줄을 구현하는 JavaScript의 예

위 내용은 JavaScript에서 진행률 표시줄을 구현하는 여러 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.