Javascript+CSS3Implémentation de l'effet de barre de progression

La barre de progression est couramment utilisée dans de nombreux sites web, cet article présente l'effet de la barre de progression, le code spécifique est le suivant :

一：css2 属性clip实现网页进度条；

Avant de réaliser, nous allons d'abord présenter l'attribut clip, car cet attribut dans le CSS2.1Nous devons donc en apprendre davantage ;

Le degré de support du navigateur : Tous les navigateurs populaires supportent l'attribut clip.

L'attribut Clip est rarement utilisé dans3Le site c officiellement décrit ainsi : En coupant l'élément pour contrôler la zone visible de l'élément, par défaut, l'élément ne subit aucune coupe.

La syntaxe de Clip裁剪如下 :

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

L'attribut Rect nécessite quatre valeurs, top, right, bottom, left ; ils doivent être séparés par des virgules. Suivant la règle de rotation dans le sens des aiguilles d'une montre, comme l'ordre d'écriture de margin et padding dans notre CSS.

Dans le CSS2.1Dans ce cas, <top> et <bottom> spécifient les décalages à partir du bord supérieur de la boîte de l'élément, <left> et <right> spécifient les décalages à partir du bord gauche de la boîte de l'élément. Voici :

Nous pouvons également jeter un coup d'œil à un autre exemple simple,

Voici le CSS suivant :

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

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

L'exemple suivant est dans50X55px de boîte rectangulaire est une coupe en ligne, obtenant une boîte rectangulaire avec une ligne continue :

Comme indiqué dans l'image suivante :

Nous pouvons d'abord jeter un coup d'œil à un exemple de barre de progression ;

Code HTML suivant :

<h2>使用clip实现裁剪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>

Code CSS suivant :

.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;}

Voici une explication de l'HTML ci-dessus3de div, l'un est le conteneur d'élément (progress-box) est essentiellement pour mettre en avant le bord,100% devrait être aussi long que la capacité,

Deuxième progress-bar est l'élément représentant la couleur de fond en constante évolution,

Troisième est le texte de valeur de progression à afficher.

Pour démontrer l'effet, nous avons besoin d'un code simple setInterval en JavaScript pour démontrer l'effet de la barre de progression ; Voici le code setInterval suivant ;

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++;
  }
}

Démo ci-dessous pour obtenir l'effet ; Utilisez clip pour réaliser la démo de la裁剪

Deuxièmement : Utiliser les événements de progression (progress) pour interagir avec le serveur pour réaliser la barre de progression de la page web;

Événement de progression (progress) : Définit les événements liés à la communication client-serveur, il y a les suivants6des événements de progression.

1. loadstart : Déclenché lorsque le premier octet des données de réponse est reçu.
2. progress : Déclenché en continu pendant la réception de la réponse.
3. error : Déclenché lorsque l'erreur se produit lors de la requête.
4. abort : Déclenché lorsque la connexion est interrompue en appelant la méthode abort().
5. load : Déclenché lorsque des données de réponse complètes sont reçues.
6. loadend：在通信完成或者触发error、abort或load事件后触发。

每个请求不对触发Loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

支持前5个事件的浏览器有Firefox 3.5+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。

这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position和totalSize。其中，lengthComputable是一个表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length相应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。如下截图有上面介绍的三个参数；

Code HTML suivant :

<h2>使用clip实现裁剪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>

与服务器端交互的代码如下：

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 = "Received" + event.position + " of " + event.totalSize + " bytes";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // where event.loaded represents how many bytes of the stream have been loaded, and event.total represents the total number of bytes of the stream. We get such a percentage,
      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 code to simulate arbitrarily, of course, it is not like this in actual use! I just output the content;

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

Troisième : CSS3 Demo de barre de progression avec animation et dégradé linéaire ;

Code HTML suivant :

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

Code CSS suivant :

#loading-status {largeur:300px;bordure:1px solide #669CB8;-webkit-boîte-ombre: 0px 2px 2px #D0D4D6; -moz-boîte-ombre:0px 2px 2px #D0D4D6;bordure-radius: 10px;hauteur:20px;remplissage: 1px;}
#process {largeur: 80%;hauteur: 100%;bordure-radius: 10px;fond: -webkit-gradient(lineaire, 0 0, 0 100%, depuis (#7BC3FF), couleur-stop(0.5,#42A9FF), vers (#7BC3FF));-webkit-animation: load 3s fluid-sortie infinie;}
@-webkit-keyframes load {
  0% {
    largeur: 0%;      
  }
  100% {
    largeur: 80%;    
  }
}

L'effet est le suivant :

Déclaration : le contenu de cet article est来源于网络，appartient à l'auteur original, le contenu est apporté par les utilisateurs d'Internet de manière spontanée et auto-chargée, ce site Web ne détient pas de droits de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournissez des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.