1. Préface
J'ai toujours aimé Win8 en attendant la barre de progression du cercle rapide. Lorsque Win8 est sorti pour la première fois, c'était tellement incroyable! Je n'en avais aucune idée à ce moment-là et je ne l'ai pas étudié. Après avoir cherché des informations en ligne récemment, je l'ai finalement compris! Allons d'abord à la démo et montrons votre vilain visage! Pour l'aperçu, veuillez consulter: Win8 Progress Bar.
2. Brève introduction
Écrivant JavaScript natif, vous devez comprendre que JS est basé sur la programmation orientée objet et le calcul des coordonnées circulaires!
Principe d'implémentation: abstraction de chaque point dans un objet (type ProgressBarWin8), stockez chaque objet DOT dans un tableau (ProgressArray), retardez l'exécution de la méthode d'exécution de chaque objet DOT. Quant à la course à DOT plus rapide et plus rapide, il est réalisé en modifiant les millisecondes de retard de la minuterie.
La copie de code est la suivante:
// Déterminez la taille des coordonnées de l'élément X et du centre X et définissez le temps de retard de la minuterie
if (this.position.left <this.fixed.left) {
this.delay + = .5;
} autre {
this.delay - = .5;
}
Il est préférable d'utiliser le code source! La capacité d'expression n'est vraiment pas très bonne (les commentaires du code sont plus détaillés, et vous verrez plus clairement).
La copie de code est la suivante:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Imitation Win8 Waiting for Progress Bar </Title>
<style>
corps {
marge: 0;
rembourrage: 0;
Contexte: vert
}
</ style>
</ head>
<body>
<cript>
// ********* Conditions de préparation *********
// Formule de conversion d'angle de rayons: rayon = math.pi * angle / 180; Des fonctions telles que math.sin (), math.cos () dans js sont calculées en fonction des radians
// Formule de calcul pour les coordonnées de l'axe X du cercle: math.cos (math.pi * angle / 180) * Radius + Centre des coordonnées de l'axe x de l'axe x
// Formule de calcul pour les coordonnées des cercles de l'axe des y: math.sin (math.pi * angle / 180) * RADIUS + COORDINATIONS DE CASSIONS AXIS Y
// ********* Conditions de préparation *********
// Dot Element Class (il n'y a pas de concept de classe dans JS, juste simulé ici)
fonction progressBarwin8 () {
// Coordonnées centrales
this.fixed = {
à gauche: 0,
en haut: 0
};
// coordonnée d'élément de balise HTML
this.position = {
à gauche: 0,
en haut: 0
};
this.radius = 70; // rayon de cercle
this.ang = 270; // angle, par défaut 270
this.delay = 30; // retard de minuterie millisecondes
this.timer = null; // Objet Timer Time
this.dom = null; // élément de balise HTML
// Style d'élément de balise HTML, la position doit être définie sur Absolute
this.style = {
Position: "Absolu",
Largeur: "10px",
hauteur: "10px",
Contexte: "#fff",
"Border-Radius": "5px"
};
}
// chaque fonction de JS a un attribut d'objet prototype, et chaque instance est accessible
ProgressBarwin8.prototype = {
// Méthode d'exécution
run: function () {
if (this.timer) {
ClearTimeout (this.timer);
}
// Définissez les coordonnées de l'élément de balise HTML, c'est-à-dire Calculez les coordonnées de l'axe des points x et y sur le cercle
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.ang / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// change l'angle
this.angle ++;
// Déterminez la taille des coordonnées de l'élément X et du centre X et définissez le temps de retard de la minuterie
if (this.position.left <this.fixed.left) {
this.delay + = .5;
} autre {
this.delay - = .5;
}
var scope = this;
// temporisateur, boucle pour appeler la méthode d'exécution, c'est un peu récursif
this.timer = setTimeout (function () {
// L'appel de la fonction en js cela pointe vers l'appelant, et c'est actuellement la fenêtre
Scope.run ();
}, this.delay);
},
// Réglage initial des éléments de balise HTML
defaultSetting: function () {
// Créer un élément de portée
this.dom = document.CreateElement ("Span");
// Définit le style de l'élément de portée, la traversée de l'objet en js est l'attribut
pour (propriété var dans ce.style) {
// Les méthodes d'objet en js peuvent être utilisées avec. opérateurs, ou par paires de valeurs clés
this.dom.style [propriété] = this.style [propriété];
}
// La largeur de la zone d'affichage du document dans la fenêtre intérieure de l'Innerheight n'inclut pas les frontières et les barres de défilement. Cette propriété est lisible et écrit.
// Définit les coordonnées de l'axe X et Y du centre du cercle, la zone visuelle actuelle est le général, c'est-à-dire le point central
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
// Définit les coordonnées initiales de l'élément de portée
this.position.left = math.cos (math.pi * this.angle / 180) * this.radius + this.fixed.left;
this.position.top = math.sin (math.pi * this.ang / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// Ajouter la balise Span au document
document.body.ApendChild (this.dom);
// renvoie l'objet actuel
retourner ceci;
}
};
// Si vous ne comprenez pas, commentez le code suivant et testez d'abord le fonctionnement d'un point
// new ProgressBarWin8 (). DefaultSetting (). run ();
var progressArray = [], // est utilisé pour stocker chaque tableau d'objets d'élément de point. La taille du tableau dans JS est variable, similaire à la collection de listes
Temparray = [], // utilisé pour stocker chaque objet lancé par ProgressArray. Une fois la taille de la fenêtre modifiée, réinitialisez la coordonnée centrale de chaque objet.
minuterie = 200; // Timer pour exécuter une méthode d'exécution d'objet d'élément toutes les millisecondes
// Créez un objet Dot Element et enregistrez-le dans un tableau, et créez 5 objets ici
pour (var i = 0; i <5; ++ i) {
ProgressArray.push (new ProgressBarWin8 (). DefaultSetting ());
}
// étendez le tableau de chaque méthode, la plupart des lambdas en C # sont implémentées de cette manière
Array.prototype.each = function (fn) {
pour (var i = 0, len = this.length; i <len;) {
// modifie la portée de cela dans la fonction fn via l'appel (objet, arg1, arg2, ...) / appliquer (objet, [arg1, arg2, ...]), afin qu'il puisse être utilisé pour l'héritage
fn.call (this [i ++], arguments); // ou: fn.apply (this [i ++], arguments)
}
};
// l'événement change de taille de fenêtre, réinitialisez les coordonnées centrales de chaque objet élément
window.onresize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
});
};
// Combien de millisecondes sont utilisées pour exécuter la méthode d'exécution d'objet d'élément de la collection de tableaux
timer = setInterval (function () {
if (progressArray.length <= 0) {
// effacez ce temporisateur, sinon il sera exécuté tout le temps (setTimeout: combien de millisecondes d'exécution de retard, une fois; setInterval: combien de millisecondes d'exécution, plusieurs fois)
ClearInterval (temporisateur);
} autre {
// La méthode Shift () est utilisée pour supprimer le premier élément du tableau et renvoyer la valeur du premier élément.
var entité = progressArray.shift ();
Temparray.push (entité);
// Exécuter la méthode d'exécution de chaque objet d'élément
entité.run ();
}
},minuteur);
</cript>
</docy>
</html>