English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barra de progreso se puede usar en muchos sitios web, este artículo es una introducción al efecto de barra de progreso, el código específico se muestra a continuación:
Uno: css2 Atributo clip para implementar barra de progreso de página web;
Antes de implementar, primero presentemos la propiedad clip, ya que esta propiedad en css2.1Se usa raramente, por lo que es necesario entenderlo;
El nivel de soporte del navegador: todos los navegadores principales admiten la propiedad clip.
La propiedad Clip en w3La página web oficial describe: al recortar el elemento para controlar el área visible del elemento, por defecto, el elemento no realiza ningún recorte.
La sintaxis de Clip es la siguiente:
.xx {recortar:rect(<top>, <right>, <bottom>, <left>)}
La propiedad rect necesita cuatro valores, top, right, bottom, left; entre ellos se necesitan usar comas para separar. Siguiendo la regla de rotación en el sentido de las agujas del reloj, como la secuencia de escritura de margin y padding en nuestro CSS. Como se muestra a continuación:
En CSS2.1En, <top>, <bottom> especifican la cantidad de desplazamiento desde la parte superior del borde de la caja del elemento, <left>, <right> especifican la cantidad de desplazamiento desde la parte izquierda del borde de la caja del elemento. Como se muestra a continuación:
Podemos ver otro demo simple,
Como se muestra en el siguiente CSS
p#one { recortar: rect(5px, 40px, 45px, 5px); }
p#two { recortar: rect(5px, 55px, 45px, 5px); }
El ejemplo anterior está en50X55px de caja rectangular es el recorte de línea, se obtiene una caja rectangular de línea punteada:
Como se muestra en la siguiente imagen:
Ahora podemos ver un demo de barra de progreso;
HTML código siguiente:
<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>
CSS código siguiente:
.progress-caja{posición:absoluta; izquierda:0; anchura:300px;altura:60px; borde:1px sólido #000; margen-izquierda:20px;}
.progress-bar{posición:absolute;left:0;top:0;ancho:300px;altura:60px;recortar:rect(0px,0px,60px,0px);fondo:red;}
.progress-text{posición:absolute;left:0;top:0;ancho:300px;altura:60px;color:Black;text-alineación:centro; línea-altura:60px; fuente-familia:Georgia;font-tamaño:2em;font-peso:bold;}
Aquí se necesita explicar el HTML superior3div, uno es el contenedor del elemento (progress-box) básicamente es para resaltar el borde, para que el usuario sepa100% debería tener cuánto容量,
segundo progress-bar es el elemento que representa el fondo de color variable establecido en rojo,
El tercero es el texto numérico que representa el progreso.
Para demostrar el efecto, necesitamos un código simple de setInterval en JavaScript para demostrar el efecto de la barra de progreso; aquí está el código de 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," + + "px,60px,0px)";
text.innerHTML = Math.ceil((cent / max) * 100) + "%";
++;
}
}
Demostración de efectos: Demostración de clip para implementar demostración de recorte
Dos: Utilizar eventos de progreso (progress) para interactuar con el servidor para implementar la barra de progreso de la página web;
Evento de progreso (progress): Define eventos relacionados con la comunicación entre cliente y servidor, que incluyen lo siguiente:6evento de progreso.
每个请求不对触发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相应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。如下截图有上面介绍的三个参数；
HTML código siguiente:
<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("La solicitud no fue exitosa: " + xhr.status);
}
}
xhr.onprogress = function(event) {
var divStatus = document.getElementById("status");
if (event.lengthComputable) {
divStatus.innerHTML = "Recibido" + event.position + " de " + event.totalSize + " bytes";
console.log(event.target);
var porcentajeCompletado = Math.round(event.loaded / event.total);
//
console.log(event.loaded, event.total, 300 * porcentajeCompletado);
progressFn(300 * porcentajeCompletado, max);
}
}
xhr.open("get", "progress.php", true);
xhr.send(null);
function progressFn(cent,max) {
if (cent < max) {
divbar.style.clip = "rect(0px," + + "px,60px,0px)";
divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
}
}
Código PHP para simular algo al azar. Claro, en uso real no sería así. Solo estoy mostrando algún contenido;
<?php
encabezado("Content-Tipo: texto/text/plain");
encabezado("Content-Longitud: 27");
echo "Algunos datos";
limpiar();
echo "Algunos datos";
limpiar();
echo "Algunos datos";
limpiar();
?>
Tres: CSS3 demo de barra de progreso implementada con animación y gradiente lineal;
HTML código siguiente:
<div id="carga-estado"> <div id="proceso"></div> </div>
CSS código siguiente:
#carga-estado {ancho:300px;borde:1px sólido #669CB8;-webkit-caja-sombra: 0px 2px 2px #D0D4D6; -moz-caja-sombra:0px 2px 2px #D0D4D6;borde-radio: 10px;altura:20px;relleno: 1px;}
#proceso {ancho: 80%;altura: 100%;borde-radio: 10px;fondo: -webkit-gradiente(lineal, 0 0, 0 100%, desde(#7BC3FF), color-detener(0.5,#42A9FF), hacia(#7BC3FF));-webkit-animación: carga 3s suave-fuera infinito;}
@-webkit-keyframes carga {
0% {
ancho: 0%;
}
100% {
ancho: 80%;
}
}
El efecto es el siguiente:
Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.