Cuando navegamos por la web, a menudo vemos el mensaje CARGANDO que aparece cuando se cargan datos. De hecho, el principio de esta función es muy simple, es decir, un DIV cubre la página actual y luego se muestra Cargando en la capa DIV cubierta. Ahora implementémoslo.
1.Página actual:
Copie el código de código de la siguiente manera:
<div><a href="#" onclick="showLoading()">Cargando</a></div>
2. Capa de máscara:
Copie el código de código de la siguiente manera:
<div id="sobre"></div>
3.Cargando capa de visualización:
Copie el código de código de la siguiente manera:
<div id="diseño"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Código general:
Copie el código de código de la siguiente manera:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<título></título>
<tipo de estilo="texto/css">
.actual a {
tamaño de fuente: 20px;
}
.encima {
pantalla: ninguna;
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
color de fondo: #f5f5f5;
opacidad: 0,5;
índice z: 1000;
}
.disposición {
pantalla: ninguna;
posición: absoluta;
arriba: 40%;
izquierda: 40%;
ancho: 20%;
altura: 20%;
índice z: 1001;
alineación de texto:centro;
}
</estilo>
<tipo de script="texto/javascript">
función mostrarCarga()
{
document.getElementById("over").style.display = "bloque";
document.getElementById("layout").style.display = "bloque";
}
</script>
</cabeza>
<cuerpo>
<div><a href="#" onclick="showLoading()">Cargando</a></div>
<div id="sobre"></div>
<div id="diseño"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</cuerpo>
</html>
Efecto final:
También vi otro método de implementación en Internet. Creo que la idea es buena, que es usar JS para cambiar continuamente el valor de la etiqueta html para lograr el efecto de cargar mensajes. Según su idea, lo implementé yo mismo. El código es el siguiente:
Copie el código de código de la siguiente manera:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<título></título>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<tipo de estilo="texto/css">
#tb {
ancho: 100%;
altura: 100%;
altura de línea: 10px;
}
#tb trtd {
alineación de texto: centro;
}
.barra de progreso {
familia de fuentes: Arial;
peso de fuente: más negrita;
color: gris;
color de fondo: blanco;
relleno: 0px;
estilo de borde: ninguno;
}
.por ciento {
familia de fuentes: Arial;
color: gris;
alineación de texto: centro;
ancho de borde: medio;
estilo de borde: ninguno;
}
</estilo>
<tipo de script="texto/javascript">
barra var = 0;
var paso = "||";
/*
*La primera forma es: $(document).ready(function(){.....});
*/
//$(función () {
// progreso();
//});
/*
*La segunda manera
*/
//ventana.onload = función () {
// progreso();
//}
/*
*La tercera forma simula $(document).ready(function(){.....});
*/
(función () {
var es decir = !!(window.attachEvent && !window.opera);
var semana = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var ejecutar = función () { para (var i = 0; i < fn.length; i++) fn[i]() };
var d = documento;
d. listo = función (f) {
si (!es decir && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
si (fn.push(f) > 1) regresa;
si (es decir)
(función () {
intente { d.documentElement.doScroll('izquierda'); ejecutar();
captura (err) { setTimeout(argumentos.callee, 0 });
})();
si no (semana)
var t = setInterval(función () {
if (/^(cargado|completo)$/.test(d.readyState))
clearInterval(t), ejecutar();
}, 0);
};
})();
documento.listo(función () {
progreso();
});
progreso de la función() {
barra = barra + 2;
paso = paso + "||";
document.getElementById("porcentaje").value = barra + "%";
document.getElementById("progressbar").value = paso;
si (barra <= 98) {
setTimeout("progreso()", 100);
}
}
</script>
</cabeza>
<cuerpo>
<id de tabla="tb">
<tr>
<td>
<tipo de entrada="texto" tamaño="50" id="porcentaje" /></td>
</tr>
<tr>
<td>
<tipo de entrada="texto" tamaño="50" id="barra de progreso" /></td>
</tr>
</tabla>
</cuerpo>
</html>
Efecto final: