Natives Javascript imitiert Win8-Warten-Prompt-Kreis-Fortschrittsbar_Javascript-Fähigkeiten-js-Tutorial-php.cn

1. Vorwort

Ich mochte den Fortschrittsbalken des Warteaufforderungskreises in Win8 schon immer sehr. Als Win8 zum ersten Mal herauskam, fühlte es sich so magisch an! Ich hatte damals keine Ahnung und habe keine Nachforschungen angestellt. Nachdem ich kürzlich im Internet nach Informationen gesucht habe, habe ich es endlich herausgefunden! Lasst uns zuerst zur Demo gehen und angeben! Eine Vorschau finden Sie unter: Win8-Fortschrittsbalken.
2. Kurze Einführung

Um natives Javascript zu schreiben, müssen Sie verstehen, dass js auf objektorientierter Programmierung und Kreiskoordinatenberechnung basiert!

Implementierungsprinzip: Abstrahieren Sie jeden Punkt in ein Objekt (Typ ProgressBarWin8), speichern Sie jedes Punktobjekt in einem Array (progressArray), verzögern Sie die Ausführung der Ausführungsmethode jedes Punktobjekts, da die Punkte immer schneller laufen wird durch Ändern der Timer-Verzögerung in Millisekunden erreicht.

Code kopieren Der Code lautet wie folgt:

 
 // Bestimmen Sie die Größe des Elements x und die mittlere x-Koordinate und stellen Sie die Timer-Verzögerungszeit ein 
if (this.position.left < this.fixed.left) { 
this.delay = .5; .delay -= .5; 
} 

 
Lass uns den Quellcode besorgen! Die Ausdrucksfähigkeit ist wirklich nicht sehr gut (ausführlichere Kommentare im Code machen es klarer). 

Code kopieren Der Code lautet wie folgt:

 
 http-equiv="Content-Type" content="text/html; charset=utf-8"/> >body { 
margin: 0; 
background: green 
} 
 
<script> <br>//********Vorbereitungsbedingungen********** <br>// Umrechnungsformel für Bogenmaß und Winkel: Bogenmaß = Math.PI*Winkel /180 ; Math.sin(), Math.cos() und andere Funktionen in js werden basierend auf dem Bogenmaß berechnet <br>// Formel zur Berechnung der X-Achsen-Koordinaten des Kreises: Math.cos(Math.PI * Winkel / 180) * Radius Kreismittelpunkt X-Achsen-Koordinaten<br>//Berechnungsformel für Kreis-Y-Achsen-Koordinaten: Math.sin(Math.PI * Winkel/180) * Radius Kreismittelpunkt Y-Achsen-Koordinaten<br>//**** ****Vorbereitungsbedingungen**** **** <br><br><br>// Punktelementklasse (es gibt kein Klassenkonzept in js, es wird hier nur simuliert) <br>Funktion ProgressBarWin8( ) { <br>// Kreismittelpunktkoordinaten<br>this .fixed = { <br>left: 0, <br>top: 0 <br>}; <br>// HTML-Tag-Elementkoordinaten <br>this. position = { <br>left: 0, <br>top : 0 <br>}; <br>this.radius = 70; // Kreisradius <br>this.angle = 270; // Winkel, Standard 270 <br>this.delay = 30; // Timer-Verzögerung in Millisekunden <br>this.timer = null; // Timer-Zeitobjekt <br>this.dom = null; // HTML-Tag-Element Stil, Position muss auf absolut gesetzt werden <br>this.style = { <br>position: "absolute", <br>width: "10px", <br>height: "10px", <br>background: " #fff", <br>"border-radius": "5px " <br>}; <br>} <br><br>// Jede Funktion in js verfügt über ein Prototypobjektattribut, auf das jede Instanz zugreifen kann <br>ProgressBarWin8.prototype = { <br>// Run Method <br>run: function() { <br>if (this.timer) { <br>clearTimeout(this.timer)} <br><br>// Legen Sie die Koordinaten des HTML-Tag-Elements fest, dh berechnen Sie die x- und y-Achsenkoordinaten des Punktes auf dem Kreis <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; this.dom.style.left = this.position.left "px"; <br>this dom.style.top = this.position.top "px";// Ändern Sie den Winkel <br>this.angle; <br><br>// Bestimmen Sie die x-Koordinatengröße des Elements x und die mittlere x-Koordinate des Kreises und stellen Sie die Timer-Verzögerungszeit ein <br>if (this.position.left < this.fixed .left) { <BR>this.delay = .5; <BR>} else { <br>this.delay -= .5; <br>} <BR><BR>var Scope = this; / Timer, zyklischer Aufruf der Ausführungsmethode, etwas rekursiv <BR>this.timer = setTimeout(function () { <BR>// Beim Aufruf einer Funktion in js zeigt dies auf den Aufrufer. Derzeit ist dies Fenster <br> Scope.run(); <br>}, this.delay); <BR>}, <br>// Anfangseinstellung des HTML-Tag-Elements <br>defaultSetting: function () { <BR>// Erstelle ein Span-Element <BR>this.dom = document.createElement("span"); <BR>// Legen Sie den Stil des Span-Elements fest. Das Durchlaufen von Objekten in js ist ein Attribut <BR>for (var property in this.style) { <BR>// Objektmethoden in js können den .-Operator oder Schlüssel-Wert-Paare verwenden <br>this.dom.style[property] = this style[property]; Breite des Dokumentanzeigebereichs im Fenster, ohne Ränder und Bildlaufleisten. Diese Eigenschaft ist lesbar und beschreibbar.<BR>//Legen Sie die x- und y-Achsenkoordinaten des Mittelpunkts des Kreises fest, den allgemeinen Wert des aktuellen visuellen Bereichs, dh des Mittelpunkts <BR>this.fixed.left = window.innerWidth / 2; >this.fixed.top = window.innerHeight / 2; <BR>//Legen Sie die Anfangskoordinaten des Span-Elements fest <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 "<BR>// Fügen Sie dem Dokument <BR>document.body das Span-Tag hinzu .appendChild(this.dom); <BR><br>// Gibt das aktuelle Objekt zurück <br>} <BR>// Wenn Sie es nicht verstehen, Kommentieren Sie den folgenden Code aus und testen Sie zuerst die Funktionsweise eines Punktes<BR>//new ProgressBarWin8().defaultSetting().run(); <BR><br><br><BR>var progressArray = [], / / Wird zum Speichern jedes Punktelement-Objektarrays verwendet, Array in js. Variable Größe, ähnlich der Listensammlung<br>tempArray = [], // Wird zum Speichern jedes von progressArray geworfenen Objekts verwendet, nachdem sich die Fenstergröße geändert hat jedes Objekt <br>timer = 200; / / Ein Timer zum Ausführen der Ausführungsmethode eines Elementobjekts alle paar Millisekunden <br><br>// Erstellen Sie ein Punktelementobjekt und speichern Sie es in einem Array. Hier werden 5 Objekte erstellt <BR>for (var i = 0; i &lt ; 5; i) { <BR>progressArray.push(new ProgressBarWin8().defaultSetting()); <br>} <br><BR>// Erweitertes Array jeweils Methode werden die meisten Lambdas in c# so implementiert<BR>Array.prototype.each = function (fn) { <BR>for (var i = 0, len = this.length; i < len;) { <br> // Durch die Methode call(object,arg1,arg2,. ..)/apply(object,[arg1,arg2,...]) wird der Umfang dieser Funktion in der Funktion fn geändert, die zum Erben von <br>fn verwendet werden kann .call(this[i],arguments);// Oder: fn.apply(this[i ],arguments) <BR>} <BR>} <BR><BR>// Ereignis zur Änderung der Fenstergröße, zurücksetzen Mittelpunktkoordinaten jedes Elementobjekts <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>//Wie viele Millisekunden soll die Ausführungsmethode des Elementobjekts der Array-Sammlung ausgeführt werden <BR>timer = setInterval( function () { <BR>if (progressArray.length <= 0 ) { <BR>// Lösche diesen Timer, andernfalls wird er für immer ausgeführt (setTimeOut: wie viele Millisekunden die Ausführung einmal verzögert werden soll; setInterval: wie viele Millisekunden mehrmals ausführen) <br>clearInterval(timer); <br>} else { <BR>// Die Methode „shift()“ wird verwendet, um das erste Element des Arrays zu entfernen und den Wert des ersten Elements zurückzugeben. <BR>var entity = progressArray.shift(); <BR>tempArray.push(entity); <BR>//Führen Sie die Ausführungsmethode jedes Elementobjekts aus <BR>entity.run(); <BR>} >},timer); <BR></script>