javascript實現的帶有百分比的進度條效果

admin發表於2017-04-01
JavaScript

本章節介紹一下如何利用javascript實現帶有百分比的進度條效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css">  
.container{  
  width:450px;  
  border:1px solid #6C9C2C;  
  height:25px;  
}
#bar{  
  background:#95CA0D;  
  float:left; 
  height:100%;  
  text-align:center;  
  line-height:150%; 
}  
</style>  
<script type="text/javascript">  
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(); 
}  
</script> 
   
</head> 
<body> 
<div class="container"> 
  <div id="bar" style="width:0%;"></div>  
</div>  
<span id="total"></span> 
</body> 
</html>

上面的程式碼實現了進度條功能，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function run(){ }，此函式每執行一次都可以設定重新設定一次進度條的寬度，和百分比的數值。

（2）.var bar=document.getElementById("bar")，獲取id屬性值為bar的元素。

（3）.var total=document.getElementById("total")，獲取id屬性值為total的元素。

（4）.bar.style.width=parseInt(bar.style.width) + 1 + "%"，設定bar的寬度，每一次都會加1%的寬度。

（5）.total.innerHTML = bar.style.width,將bar的寬度寫入total元素，其實也就是進度條的進度值。

（6）.if(bar.style.width == "100%"){  

  window.clearTimeout(timeout); 

  return; 

}，如果當寬度值為100%的時候，那麼就是已經進度條完畢，就停止定時器函式的執行。

（7）.var timeout=window.setTimeout("run()",100)，遞迴呼叫run()函式。

二.相關閱讀:

（1）.parseInt()方法可以參閱javascript parseInt()一章節。

（2）.innerHTML屬性可以參閱js innerHTML一章節。

（3）.setTimeout()方法可以參閱setTimeout()一章節。

（4）.clearTimeout()方法可以參閱clearTimeout()方法一章節。

相關文章