Javascript+CSS3實(shí)現(xiàn)進(jìn)度條效果

更新時(shí)間：2016年10月28日 09:54:27 作者：涂根華

本篇文章主要介紹Javascript+CSS3實(shí)現(xiàn)進(jìn)度條效果，可以實(shí)現(xiàn)給用戶一個(gè)等待的過程，有需要的可以了解一下。

進(jìn)度條在很多web中都能用的到，本文就是介紹了進(jìn)度條效果，具體代碼如下：

一：css2 屬性clip實(shí)現(xiàn)網(wǎng)頁進(jìn)度條；

在實(shí)現(xiàn)之前，我們先來介紹一下clip屬性，因?yàn)檫@個(gè)屬性在css2.1中很少使用到，所以我們有必要來了解一下；

瀏覽器支持程度：所有主流瀏覽器都支持 clip 屬性。

Clip屬性在w3c官網(wǎng)是這樣描述的：通過對(duì)元素進(jìn)行裁剪來控制元素的可視區(qū)域，默認(rèn)情況下元素是不進(jìn)行任何裁剪的。

Clip裁剪的語法如下：

.xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect屬性需要四個(gè)值，top,right,bottom,left；他們之間需要使用逗號(hào)隔開。遵循順時(shí)針旋轉(zhuǎn)規(guī)則，和我們的css中的margin，padding書寫順序一樣的。

在css2.1中，rect()的<top>,<bottom>指定偏移量是從元素的盒子頂部邊緣算起的，<left>，<right>指定的偏移量是從元素的盒子左邊邊緣算起的。如下：

我們可以再來看一個(gè)簡單的demo，

如下css

p#one { clip: rect(5px, 40px, 45px, 5px); }

p#two { clip: rect(5px, 55px, 45px, 5px); }

上面的例子是在50X55px的長方形盒子中是行剪切，得到虛線的長方形：

如下圖：

我們現(xiàn)在可以先來看一個(gè)進(jìn)度條的demo；

HTML代碼如下：

<h2>使用clip實(shí)現(xiàn)裁剪demo</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>

CSS代碼如下：

.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

這里需要解釋一下上面的HTML3個(gè)div，一個(gè)是元素容器(progress-box)基本就是想突出邊框，讓用戶知道100%應(yīng)該是有多長的容量，

第二個(gè)progress-bar是表示不斷變化的元素背景色設(shè)置為紅色，

第三個(gè)是表示進(jìn)度顯示的數(shù)值文本。

為了演示效果，我們需要一個(gè)簡單的JS中的setInterval代碼來演示進(jìn)度條的效果；如下setInterval的代碼；

var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
var cent = 0,
   max = 300;
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

demo如下效果；使用clip實(shí)現(xiàn)裁剪demo

二：使用進(jìn)度事件(progress)與服務(wù)器端交互來實(shí)現(xiàn)網(wǎng)頁進(jìn)度條；

進(jìn)度事件(progress) : 定義了與客戶端服務(wù)器通信有關(guān)的事件，有以下6個(gè)進(jìn)度事件。

loadstart：在接收到相應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。
error：在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。
abort：在因?yàn)檎{(diào)用abort()方法而終止鏈接時(shí)觸發(fā)。
load：在接收到完整的相應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
loadend：在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。

每個(gè)請(qǐng)求不對(duì)觸發(fā)Loadstart事件開始，接下來是一或多個(gè)progress事件，然后觸發(fā)error、abort或load事件中的一個(gè)，最后以觸發(fā)loadend事件結(jié)束。

支持前5個(gè)事件的瀏覽器有Firefox 3.5+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。

這個(gè)事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會(huì)接收到一個(gè)event對(duì)象，其target屬性是XHR對(duì)象，但包含著三個(gè)額外的屬性：lengthComputable、position和totalSize。其中，lengthComputable是一個(gè)表示進(jìn)度信息是否可用的布爾值，position表示已經(jīng)接收的字節(jié)數(shù)，totalSize表示根據(jù)Content-Length相應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。有了這些信息，我們就可以為用戶創(chuàng)建一個(gè)進(jìn)度指示器了。如下截圖有上面介紹的三個(gè)參數(shù)；

HTML代碼如下：

<h2>使用clip實(shí)現(xiàn)裁剪demo</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>
<div id="status"></div>

與服務(wù)器端交互的代碼如下：

var divbar = document.getElementById("progress-bar"),
  divText = document.getElementById("progress-text");
var cent = 0,
  max = 300;
function createXHR(){
   var xhr;
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
     xhr=new XMLHttpRequest();
   }else{ // code for IE6, IE5
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
 }
 var xhr = createXHR();
 xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
     alert(xhr.responseText);
  }else {
     alert("Request was unsuccessful: " + xhr.status);
  }
 }
 xhr.onprogress = function(event) {
  var divStatus = document.getElementById("status");
  if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " of " + event.totalSize + " bytes";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // 其中的event.loaded表示當(dāng)前加載了多少字節(jié)流，而event.total表示總共有多少字節(jié)流 得到這樣一個(gè)百分比，
      console.log(event.loaded, event.total, 300 * percentComplete);
      progressFn(300 * percentComplete, max);
   }
 }
    
 xhr.open("get", "progress.php", true);
 xhr.send(null); 
 function progressFn(cent,max) {
   if (cent < max) {
     divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
     divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
   } 
 }

PHP代碼為了隨便模擬下隨便寫一個(gè)，當(dāng)然在實(shí)際使用上肯定不是這樣的哦！我只是輸出一個(gè)內(nèi)容而已；

<?php
  header("Content-Type: text/plain");
  header("Content-Length: 27");
  echo "Some data";
  flush();
  echo "Some data";
  flush();
  echo "Some data";
  flush();
?>

三： CSS3 動(dòng)畫及線性漸變實(shí)現(xiàn)進(jìn)度條demo；

HTML代碼如下：

<div id="loading-status">
  <div id="process"></div>
</div>

CSS代碼如下：

#loading-status {width:300px;border:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;border-radius: 10px;height:20px;padding: 1px;}
#process {width: 80%;height: 100%;border-radius: 10px;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));-webkit-animation: load 3s ease-out infinite;}
@-webkit-keyframes load {
  0% {
    width: 0%;      
  }
  100% {
    width: 80%;    
  }
}

效果如下：