English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barra di progresso è utilizzata in molti siti web, questo articolo introduce l'effetto della barra di progresso, il codice specifico è il seguente:
1: Implementazione della barra di progresso web utilizzando l'attributo clip in CSS2.
Prima di implementare, diamo un'occhiata all'attributo clip, poiché questo attributo non viene utilizzato spesso nel CSS2.1, quindi è necessario conoscerlo.
Livello di supporto dei browser: Tutti i browser mainstream supportano l'attributo clip.
L'attributo Clip è descritto come segue sul sito web W3C: Controlla l'area visibile dell'elemento tramite la sagomatura dell'elemento, per impostazione predefinita l'elemento non effettua alcuna sagomatura.
La sintassi di Clip è la seguente:
.xx {clip:rect(<top>, <right>, <bottom>, <left>)}
L'attributo Rect richiede quattro valori, top, right, bottom, left; devono essere separati da virgole. Seguendo la regola di rotazione in senso orario, come l'ordine di scrittura di margin e padding nel nostro CSS.
In CSS2.1, i valori di offset <top> e <bottom> specificati da rect() sono calcolati dal margine superiore dell'elemento, mentre i valori di offset <left> e <right> sono calcolati dal margine sinistro dell'elemento. Ecco un esempio:
Ora guardiamo un altro esempio semplice:
Ecco un esempio di CSS:
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
L'esempio sopra è un taglio di scorrimento in un riquadro rettangolare di 50x55px, ottenendo un rettangolo tratteggiato:
Come nell'immagine seguente:
Ora possiamo guardare un esempio di barra di progresso;
HTML codice come segue:
<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 id="status"></div> </div>
Il codice CSS è il seguente:
.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;}
Ecco una spiegazione dei tre div HTML elencati sopra; uno è il contenitore dell'elemento (progress-box) che vuole evidenziare i bordi, far capire all'utente quanto spazio ha il 100% di capacità,
Il secondo progress-bar rappresenta l'elemento che cambia costantemente il colore di sfondo in rosso,
Il terzo è il testo numerico che rappresenta la visualizzazione del progresso.
Per dimostrare l'effetto, abbiamo bisogno di un semplice codice setInterval in JavaScript per dimostrare l'effetto della barra di avanzamento; come segue il codice setInterval;
var bar = document.getElementById("progress-bar"),
text = document.getElementById("progress-text");
max = 300;
function createXHR(){
var timer = setInterval(progressFn, 30);
function progressFn() {
if(cent > max) {
cent = 0;
timer = setInterval(arguments.callee(), 30);
}
bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
text.innerHTML = Math.ceil((cent / max) * 100) + "%";
cent++;
}
}
Esempio di demo come segue; demo di tagliatura utilizzando clip
Secondo: Utilizzare l'evento progress per interagire con il server per implementare la barra di avanzamento della pagina web;
Evento progress (progress): Definisce gli eventi relativi alla comunicazione tra client e server, ci sono 6 eventi di progress.
Ogni richiesta non inizia con l'evento Loadstart, ma con uno o più eventi progress, poi viene attivato uno degli eventi error, abort o load e infine termina con l'attivazione dell'evento loadend.
Browser che supportano i primi 5 eventi sono Firefox 3.5+, Safari 4+, Chrome, Safari per iOS e WebKit per Android.
Questo evento viene scatenato periodicamente durante la ricezione dei nuovi dati dal browser. Il gestore degli eventi onprogress riceve un oggetto event, il cui attributo target è l'oggetto XHR, ma contiene anche tre proprietà aggiuntive: lengthComputable, position e totalSize. lengthComputable è un valore booleano che indica se le informazioni di progresso sono disponibili, position indica il numero di byte ricevuti, totalSize indica il numero di byte attesi in base all'intestazione Content-Length. Con queste informazioni, possiamo creare un indicatore di progresso per l'utente. Le immagini di seguito mostrano i tre parametri menzionati;}
HTML codice come segue:
<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 id="status"></div> </div> Ecco il codice per l'interazione con il server:
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);
}
alert("La richiesta non è stata riuscita: " + xhr.status);
}
}
xhr.onprogress = function(event) {
var divStatus = document.getElementById("status");
if (event.lengthComputable) {
divStatus.innerHTML = "Ricevuto" + event.position + " di " + event.totalSize + " byte";
console.log(event.target);
var percentComplete = Math.round(event.loaded / event.total);
// L'event.loaded rappresenta quante byte sono stati caricati, mentre l'event.total rappresenta il totale dei byte, otteniamo un tale percentuale,
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) + "%";
}
}
Codice PHP per simulare a caso, ho scritto qualcosa di casuale, ovviamente non è così nel caso pratico! Sto solo outputtendo un contenuto;
<?php
header("Content-Type: text/plain");
header("Content-Length: 27");
echo "Some data";
flush();
echo "Some data";
flush();
echo "Some data";
flush();
?>
Tre: Implementazione dell'animazione CSS3 e della gradazione lineare per il demo della barra di progresso;
HTML codice come segue:
<div id="loading-status"> <div id="process"></div> </div>
Il codice CSS è il seguente:
#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%;
}
}
L'effetto è come segue:
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.