진행률 표시줄_javascript 기술을 구현하는 js 메서드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

진행률 표시줄_javascript 기술을 구현하는 js 메서드

May 16, 2016 pm 04:14 PM

js 방법 진행률 표시줄

이 글의 예시에서는 js에서 진행률 표시줄을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

1.setTimeout 및clearTimeout

&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;进度条&lt;/title&gt; 
&lt;style type="text/css"&gt;  
.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 } 
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
&lt;/style&gt;  
&lt;script type="text/javascript"&gt;  
  function run(){  
        var bar = document.getElementById("bar"); 
        var total = document.getElementById("total"); 
    bar.style.width=parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      window.clearTimeout(timeout); 
      return; 
    } 
    var timeout=window.setTimeout("run()",100); 
  } 
    window.onload = function(){  
       run(); 
    }  
&lt;/script&gt; 
 
&lt;/head&gt; 
&lt;body&gt; 
  &lt;div class="container"&gt; 
   &lt;div id="bar" style="width:0%;"&gt;&lt;/div&gt;  
  &lt;/div&gt;  
  &lt;span id="total"&gt;&lt;/span&gt; 
&lt;/body&gt; 
&lt;/html&gt;

로그인 후 복사

렌더링:

2.setInterval 및clearInterval

&lt;html&gt;  
&lt;head&gt;  
&lt;title&gt;进度条&lt;/title&gt;  
&lt;style type="text/css"&gt;  
.processcontainer{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }  
#processbar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
&lt;/style&gt;  
&lt;script type="text/javascript"&gt;  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
     window.clearInterval(bartimer);  
  }  
 }  
var bartimer = window.setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
&lt;/script&gt;  
&lt;/head&gt;  
&lt;body&gt;  
  &lt;div class="processcontainer"&gt;  
   &lt;div id="processbar" style="width:0%;"&gt;&lt;/div&gt;  
  &lt;/div&gt;  
&lt;/body&gt;  
&lt;/html&gt;

로그인 후 복사

렌더링:

3.setTimeout과 setInterval의 차이점

setTimeout()은 코드를 한 번만 실행합니다. 여러 번 호출하려면 setInterval()을 사용하세요. setInterval() 메서드는 clearInterval()이 호출되거나 창이 닫히거나 코드 자체에서 setTimeout()을 다시 호출할 때까지 함수를 계속 호출합니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명

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