Javascript natif imite les compétences bar_javascript de progression du cercle d'invite d'attente Win8

1. Préface

J'ai toujours beaucoup aimé la barre de progression du cercle d'invite d'attente dans Win8. Lorsque Win8 est sorti pour la première fois, c'était tellement magique que je n'en avais aucune idée à l'époque et je n'ai fait aucune recherche ! Après avoir récemment cherché des informations sur Internet, j'ai enfin compris ! Allons d'abord à la démo et montrons-nous ! Pour un aperçu, veuillez consulter : barre de progression win8.
2. Brève introduction

Pour écrire du javascript natif, vous devez comprendre que js est basé sur la programmation orientée objet et le calcul de coordonnées circulaires !

Principe de mise en œuvre : abstrait chaque point dans un objet (type ProgressBarWin8), stocke chaque objet point dans un tableau (progressArray), retarde l'exécution de la méthode run de chaque objet point, comme pour les points fonctionnant de plus en plus vite est obtenu en modifiant le délai de la minuterie en millisecondes.

Copier le code Le code est le suivant :

// Déterminer la taille de l'élément x et la coordonnée x du centre, et définissez le temps de retard de la minuterie
if (this.position.left < this.fixed.left) {
this.delay = .5
} else {
this; .delay -= .5;
}

Obtenons le code source ! La capacité d'expression n'est vraiment pas très bonne (des commentaires plus détaillés dans le code le rendront plus clair).

Copier le code Le code est le suivant :

http-equiv="Content-Type" content="text/html; charset=utf-8"/>
>corps {
marge : 0 ;
remplissage : 0
fond : vert
}

<script> <br>//********Conditions de préparation*********** <br>// Formule de conversion des radians et des angles : radians = Math.PI*angle /180 ; Math.sin(), Math.cos() et d'autres fonctions en js sont calculées en fonction des radians <br>// Formule de calcul des coordonnées du cercle sur l'axe x : Math.cos(Math.PI * angle / 180) * Coordonnées de l'axe x du centre du cercle de rayon<br>//Formule de calcul des coordonnées de l'axe y du cercle : Math.sin(Math.PI * Angle/180) * Coordonnées de l'axe y du centre du cercle de rayon<br>//**** ****Conditions de préparation**** **** <br><br><br>// Classe d'élément Dot (il n'y a pas de notion de classe en js, elle est juste simulée ici) <br>fonction ProgressBarWin8( ) { <br>// Coordonnées du centre du cercle<br>this .fixed = { <br>gauche : 0, <br>haut : 0 <br>} <br>// coordonnées de l'élément de balise html <br>this. position = { <br>left: 0, <br>top : 0 <br>}; <br>this.radius = 70; // Rayon du cercle <br>this.angle = 270; // Angle, par défaut 270 <br>this.delay = 30 ; // Délai de la minuterie en millisecondes <br>this.timer = null ; // Objet de minuterie <br>this.dom = null ; // élément de balise html <br> // élément de balise html style, la position doit être définie sur absolue <br>this.style = { <br>position: "absolute", <br>width: "10px", <br>height: "10px", <br>background: " #fff", <br>"border-radius": "5px " <br>}; <br>} <br><br>// Chaque fonction en js a un attribut d'objet prototype, accessible par chaque instance <br>ProgressBarWin8.prototype = { <br>// Exécuter la méthode <br>run: function() { <br>if (this.timer) { <br>clearTimeout(this.timer); <br>} <br>// Définissez les coordonnées de l'élément de balise html, c'est-à-dire calculez les coordonnées des axes x, y du point sur le cercle <br>this.position.left = Math.cos(Math.PI * this. angle / 180) * this.radius this.fixed.left; <br>this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top <br> this.dom.style.left = this.position.left "px"; <br>this. dom.style.top = this.position.top "px" <br><br>// Changer l'angle <br>this.angle; <br><br>// Déterminez la taille de la coordonnée x de l'élément x et la coordonnée x centrale du cercle, définissez le temps de retard de la minuterie <br>if (this.position.left < this.fixed .left) { <BR>this.delay = .5; <br>} else { <br>this.delay -= .5; <BR><br>var scope = <br>/ / Timer, appelant cycliquement la méthode run, un peu récursive <BR>this.timer = setTimeout(function () { <BR>// Lors de l'appel d'une fonction en js, cela pointe vers l'appelant. Actuellement, c'est window <BR> scope.run(); <BR>}, this.delay); <BR>}, <br>// Paramètre initial de l'élément de balise html <br>defaultSetting: function () { <BR>// Créer un élément span <BR>this.dom = document.createElement("span"); <BR>// Définir le style de l'élément span. Le parcours des objets en js est un attribut <BR>for (propriété var dans this.style) { <BR>// Les méthodes objet en js peuvent utiliser l'opérateur . ou des paires clé-valeur <BR>this.dom.style[property] = this style[property] <BR>// innerWidth innerHeight Le. largeur de la zone d'affichage du document dans la fenêtre, hors bordures et barres de défilement. Cette propriété est lisible et inscriptible.<BR>//Définissez les coordonnées des axes x et y du centre du cercle, le général de la zone visuelle actuelle, c'est-à-dire le point central <BR>this.fixed.left = window.innerWidth / 2; >this.fixed.top = window.innerHeight / 2; <BR>//Définir les coordonnées initiales de l'élément span <BR>this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius this.fixed.left; <BR> this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top <BR>this.dom.style; .left = this.position.left "px"; <BR>this.dom.style.top = this.position.top "px" <BR>// Ajouter la balise span au document <BR>document.body; .appendChild(this.dom); <BR><br>// Renvoie l'objet actuel <br>return this <BR>} <BR><BR>// Si vous ne comprenez pas, commentez le code suivant et testez d'abord le fonctionnement d'un point<br>//new ProgressBarWin8().defaultSetting().run(); <br><BR><br><br>var progressArray = [], / / Utilisé pour stocker chaque tableau d'objets d'éléments de points, tableau en js Taille variable, similaire à la collection de listes<br>tempArray = [], // Utilisé pour stocker chaque objet lancé par progressArray. Après le changement de taille de la fenêtre, réinitialisez les coordonnées centrales de. each object <br>timer = 200; / / Une minuterie pour exécuter la méthode d'exécution d'un objet élément toutes les quelques millisecondes <BR><BR>// Créez un objet élément point et stockez-le dans un tableau. 5 objets sont créés ici. <br>for (var i = 0; i &lt ; 5; i) { <br>progressArray.push(new ProgressBarWin8().defaultSetting()); <BR>} <BR><BR>// Tableau étendu chacun méthode, la plupart des lambdas en c# sont implémentés comme ceci<br>Array.prototype.each = function (fn) { <br>for (var i = 0, len = this.length; i < len;) { <BR> // Par la méthode call(object,arg1,arg2,. ..)/apply(object,[arg1,arg2,...]) modifie la portée de ceci dans la fonction fn, qui peut être utilisée pour hériter de <BR>fn .call(this[i], arguments);// Ou : fn.apply(this[i ],arguments) <BR>} <BR>} <BR><BR>// Événement de changement de taille de fenêtre, réinitialisez le coordonnées centrales de chaque objet élément <br>window.onresize = function () { <br>tempArray.each(function () { <BR>this.fixed.left = window.innerWidth / 2; <BR>this.fixed. top = window.innerHeight / 2; <BR>} ); <BR>}; <BR><BR>//Combien de millisecondes pour exécuter la méthode d'exécution de l'objet élément de la collection tableau <br>timer = setInterval( function () { <br>if (progressArray.length <= 0 ) { <BR>// Effacez ce timer, sinon il sera exécuté pour toujours (setTimeOut : combien de millisecondes pour retarder l'exécution, une fois ; setInterval : combien de millisecondes à exécuter, plusieurs fois) <BR>clearInterval(timer); <BR>} else { <BR>// La méthode shift() est utilisée pour supprimer le premier élément du tableau et renvoyer la valeur du premier élément. <BR>varentity = progressArray.shift(); <BR>tempArray.push(entity); <BR>//Exécuter la méthode d'exécution de chaque objet élément <BR>entity.run(); >},minuterie); <BR></script>