1. Prefacio
Siempre me ha gustado mucho Win8 esperando la rápida barra de progreso del círculo. Cuando Win8 salió por primera vez, ¡se sintió increíble! No tenía idea en ese momento y no la estudié. Después de buscar información en línea recientemente, ¡finalmente la obtuve! ¡Primero vayamos a la demostración y muestre tu cara fea! Para una vista previa, consulte: Win8 Progress Bar.
2. Breve introducción
¡Al escribir JavaScript nativo, debe comprender que JS se basa en la programación orientada a objetos y el cálculo de las coordenadas circulares!
Principio de implementación: resumir cada punto en un objeto (ProgressBarwin8 Type), almacene cada objeto DOT en una matriz (ProgressArray), retrase la ejecución del método de ejecución de cada objeto DOT. En cuanto a la carrera más rápida y rápida, se logra cambiando los milisegundos de retraso del temporizador.
La copia del código es la siguiente:
// Determinar el tamaño de coordenadas del elemento x y el centro x, y establezca el tiempo de retraso del temporizador
if (this.position.left <this.fixed.left) {
this.delay += .5;
} demás {
this.delay -= .5;
}
¡Es mejor usar el código fuente! La capacidad de expresión realmente no es muy buena (los comentarios en el código son más detallados y verá más claramente).
La copia del código es la siguiente:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> IMitation Win8 Esperando la barra de progreso </title>
<estilo>
cuerpo {
margen: 0;
relleno: 0;
Antecedentes: verde
}
</style>
</ablo>
<Body>
<script>
// *********** Condiciones de preparación *********
// Fórmula de conversión de ángulo de radios: radio = math.pi* ángulo/180; Funciones como Math.sin (), Math.Cos () en JS se calculan en base a radianos
// Fórmula de cálculo para las coordenadas del eje X del círculo: Math.cos (Math.Pi * Angle/180) * Radius + Center Coordenadas del eje X del eje X
// Fórmula de cálculo para coordenadas del eje y de círculos: math.sin (math.pi * ángulo/180) * Radio + coordenadas de eje y de círculos
// *********** Condiciones de preparación *********
// Clase de elemento Dot (no hay concepto de clase en JS, solo simulado aquí)
function progressBarwin8 () {
// coordenadas centrales
this.fixed = {
Izquierda: 0,
Arriba: 0
};
// coordenada de elementos de etiqueta html
this.Position = {
Izquierda: 0,
Arriba: 0
};
this.radius = 70; // radio circular
this.angle = 270; // ángulo, predeterminado 270
this.delay = 30; // Millisegundos de retraso del temporizador
this.timer = null; // Objeto de tiempo del temporizador
this.dom = nulo; // elemento de etiqueta html
// estilo de elemento de etiqueta html, la posición debe configurarse en absoluto
this.style = {
Posición: "Absoluto",
Ancho: "10px",
Altura: "10px",
Antecedentes: "#fff",
"Border-Radius": "5px"
};
}
// Cada función en JS tiene un atributo de objeto prototipo, y se puede acceder a cada instancia
ProgressBarwin8.prototype = {
// Método Ejecutar
run: functer () {
if (this.timer) {
ClearTimeOut (this.timer);
}
// Establezca las coordenadas del elemento de etiqueta HTML, es decir, calcule las coordenadas del eje de puntos x e y en el círculo
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.angle / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// Cambiar el ángulo
this.angle ++;
// Determinar el tamaño de coordenadas del elemento x y el centro x, y establezca el tiempo de retraso del temporizador
if (this.position.left <this.fixed.left) {
this.delay += .5;
} demás {
this.delay -= .5;
}
Var alcance = this;
// temporizador, bucle para llamar al método de ejecución, se siente un poco recursivo
this.timer = setTimeOut (function () {
// La llamada de la función en JS señala a la persona que llama, y esta es actualmente ventana
scope.run ();
}, this.delay);
},
// Configuración inicial de elementos de etiqueta HTML
defaultSetting: functer () {
// Crear un elemento SPAN
this.dom = document.createElement ("span");
// Establecer el estilo del elemento SPAN, el recorrido del objeto en JS es el atributo
para (propiedad var en this.style) {
// Los métodos de objetos en JS pueden usarse. operadores, o a través de pares de valor clave
this.dom.style [propiedad] = this.style [propiedad];
}
// El ancho del área de visualización de documentos en la ventana InnerHidth Innerheight no incluye bordes y barras de desplazamiento. Esta propiedad es legible y escritura.
// establece las coordenadas del eje x e y del centro del círculo, el área visual actual es el general, es decir, el punto central
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
// Establecer las coordenadas iniciales del elemento SPAN
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.angle / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// Agregue la etiqueta SPAN al Documet
document.body.appendChild (this.dom);
// Devuelve el objeto actual
devolver esto;
}
};
// Si no comprende, comente el siguiente código y pruebe primero la operación de un punto
// new ProgressBarwin8 (). DefaultSetting (). Run ();
VAR ProgressArray = [], // se usa para almacenar cada matriz de objeto de elemento DOT. El tamaño de la matriz en JS es variable, similar a la colección de listas
temparray = [], // utilizado para almacenar cada objeto lanzado por ProgressArray. Después de cambiar el tamaño de la ventana, restablezca la coordenada central de cada objeto.
temporizador = 200; // temporizador para ejecutar un método de ejecución de objeto de elemento cada milisegundos
// Crear objeto de elemento DOT y guárdelo en una matriz, y cree 5 objetos aquí
para (var i = 0; i <5; ++ i) {
ProgressArray.push (nuevo ProgressBARWin8 (). DefaultSetting ());
}
// extender la matriz cada método, la mayoría de las lambdas en C# se implementan de esta manera
Array.prototype.each = function (fn) {
para (var i = 0, len = this.length; i <len;) {
// Cambiar el alcance de esto en la función fn a través del método de llamada (Object, Arg1, Arg2, ...)/Aplicar (Object, [Arg1, Arg2, ...]), para que pueda usarse para la herencia
fn.call (this [i ++], argumentos); // o: fn.apply (this [i ++], argumentos)
}
};
// El tamaño del tamaño de la ventana cambia el evento, restablece las coordenadas centrales de cada objeto de elemento
window.onresize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
});
};
// cuántos milisegundos se utilizan para ejecutar el método de ejecución del objeto de elemento de la colección de matriz
timer = setInterval (function () {
if (progressarray.length <= 0) {
// Borrar este temporizador, de lo contrario, se ejecutará todo el tiempo (setTimeOut: cuántos milisegundos de ejecución de retraso, una vez; setInterval: cuántos milisegundos de ejecución, varias veces)
ClearInterval (temporizador);
} demás {
// El método shift () se usa para eliminar el primer elemento de la matriz desde él y devolver el valor del primer elemento.
VAR entity = progressArray.hift ();
temparray.push (entidad);
// Ejecutar el método Ejecutar de cada objeto de elemento
entity.run ();
}
},minutero);
</script>
</body>
</html>