1. Vorwort
Ich habe Win8 schon immer sehr gern auf die Progress -Progress -Bar der schnellen Kreis. Als Win8 zum ersten Mal herauskam, fühlte es sich so toll an! Ich hatte damals keine Ahnung und studierte es nicht. Nachdem ich kürzlich online nach Informationen gesucht habe, habe ich es endlich bekommen! Gehen wir zuerst zur Demo und zeigen Sie Ihr hässliches Gesicht! Für Vorschau siehe: Win8 Progress Bar.
2. kurze Einführung
Wenn Sie native JavaScript schreiben, müssen Sie verstehen, dass JS auf objektorientierter Programmierung und kreisförmiger Koordinatenberechnung basiert!
Implementierungsprinzip: Zusammenfassung jeden Punkt in ein Objekt (ProgressBarwin8 -Typ), jedes DOT -Objekt in einem Array (ProgressArray) speichern, verzögern Sie die Ausführung der Auslaufmethode jedes DOT -Objekts. Was den schnelleren und schnelleren Punkt betrifft, wird er erreicht, indem die Timer -Verzögerungs -Millisekunden geändert werden.
Die Codekopie lautet wie folgt:
// Bestimmen Sie die Koordinatengröße von Element X und Center X und setzen Sie die Zeitschaltverzögerungszeit ein
if (this.position.left <this.fixed.left) {
this.delay += 0,5;
} anders {
this.delay -= 0,5;
}
Es ist besser, den Quellcode zu verwenden! Die Ausdrucksfähigkeit ist wirklich nicht sehr gut (die Kommentare im Code sind detaillierter und Sie werden deutlicher sehen).
Die Codekopie lautet wie folgt:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/>
<title> Imitation Win8 wartet auf Fortschrittsleiste </title>
<Styles>
Körper {
Rand: 0;
Polsterung: 0;
Hintergrund: Grün
}
</style>
</head>
<body>
<Script>
// *****************************
// Radi -Winkelkonvertierung Formel: radius = math.pi* Winkel/180; Funktionen wie Math.sin (), Math.cos () in JS werden basierend auf Radians berechnet
// Berechnungsformel für die x-Achsenkoordinaten des Kreises: Math.cos (math.pi * Winkel/180) * Radius + Mittel x-Achsenkoordinaten der x-Achse
// Berechnungsformel für y-Achsenkoordinaten von Kreisen: Math.sin (math.pi * Winkel/180) * Radius + Y-Achsenkoordinaten von Kreisen
// *****************************
// Punktelementklasse (es gibt kein Konzept der Klasse in JS, nur hier simuliert)
Funktion ProgressBarwin8 () {
// Koordinaten in Zentrum
this.fixed = {
links: 0,
Oben: 0
};
// HTML -Tagelementkoordinate
this.position = {
links: 0,
Oben: 0
};
this.radius = 70; // Kreisradius
this.angle = 270; // Winkel, Standard 270
this.delay = 30; // Timer -Verzögerung Millisekunden
this.timer = null; // Timer -Zeitobjekt
this.dom = null; // HTML -Tagelement
// HTML -Tagelementstil, die Position muss auf absolut eingestellt werden
this.style = {
Position: "absolut",
Breite: "10px",
Höhe: "10px",
Hintergrund: "#fff",
"Border-Radius": "5px"
};
}
// Jede Funktion in JS hat ein Prototyp -Objektattribut, und auf jede Instanz kann zugegriffen werden
ProgressBarwin8.Prototype = {
// Methode ausführen
run: function () {
if (this.timer) {
Clearimeout (this.timer);
}
// Setzen Sie die Koordinaten des HTML -Tagelements, dh die Koordinaten der Punkte x- und y -Achse auf dem Kreis
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";
// den Winkel ändern
this.angle ++;
// Bestimmen Sie die Koordinatengröße von Element X und Center X und setzen Sie die Zeitschaltverzögerungszeit ein
if (this.position.left <this.fixed.left) {
this.delay += 0,5;
} anders {
this.delay -= 0,5;
}
var scope = this;
// Timer, Looping, um die Run -Methode aufzurufen, fühlt sich etwas rekursiv an
this.timer = setTimeout (function () {
// Der Aufruf der Funktion in JS zeigt dies auf den Anrufer, und dies ist derzeit ein Fenster
Scope.run ();
}, this.delay);
},
// Erste Einstellung von HTML -Tagelementen
Standardsetting: function () {
// Erstellen Sie ein Spannelement
this.dom = document.createelement ("span");
// Setzen Sie den Stil des Span -Elements, die Durchquerung des Objekts in JS ist das Attribut
für (var Eigenschaft in diesem.style) {
// Objektmethoden in JS können mit verwendet werden. Operatoren oder durch Schlüsselwertpaare
this.dom.Style [Eigentum] = this.style [Eigentum];
}
// Die Breite des Dokumentenanzeigebereichs im Innenheigheight -Fenster in der Innerbreite enthält keine Grenzen und Scroll -Balken. Diese Eigenschaft ist lesbar und beschreibbar.
// Setzen Sie die x- und y-Achse-Koordinaten der Mitte des Kreises, der aktuelle visuelle Bereich ist der allgemeine, dh der Mittelpunkt
this.fixed.left = window.innnerwidth / 2;
this.fixed.top = window.innerHeight / 2;
// Setzen Sie die anfänglichen Koordinaten des Span -Elements
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";
// Fügen Sie das Dokumett das Spann -Tag hinzu
document.body.appendchild (this.dom);
// das aktuelle Objekt zurückgeben
gib dies zurück;
}
};
// Wenn Sie nicht verstehen, kommentieren Sie den folgenden Code und testen Sie den Betrieb eines Punktes zuerst
// New ProgressBarwin8 (). defaultSeting (). Run ();
Var ProgressArray = [], // wird verwendet, um jedes DOT -Element -Objekt -Array zu speichern. Die Array -Größe in JS ist variabel, ähnlich wie bei der Listensammlung
tempArray = [], // wird verwendet, um jedes von ProgressArray geworfene Objekt zu speichern. Nachdem die Fenstergröße geändert wurde, setzen Sie die mittlere Koordinate jedes Objekts zurück.
Timer = 200; // Timer zum Ausführen einer Elementobjekt -Ausführungsmethode in jeder Millisekunden
// DOT -Elementobjekt erstellen und in einem Array speichern und hier 5 Objekte erstellen
für (var i = 0; i <5; ++ i) {
progressArray.push (neuer progreshbarwin8 (). defaultSeting ());
}
// Erweitern Sie das Array jede Methode, die meisten Lambdas in C# werden auf diese Weise implementiert
Array.Prototype.each = function (fn) {
für (var i = 0, len = this.Length; i <len;) {
// Ändern Sie den Umfang davon in der Funktion FN durch den Aufruf (Objekt, Arg1, Arg2, ...)/anwenden (Objekt, [arg1, arg2, ...]), damit sie für die Erbschaft verwendet werden kann
fn.call (this [i ++], Argumente); // oder: fn.apply (this [i ++], Argumente), Argumente)
}
};
// Die Fenstergröße ändert das Ereignis, setze die Mittelkoordinaten jedes Elementobjekts zurück
window.onResize = function () {
temparray.each (function () {
this.fixed.left = window.innnerwidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
// Wie viele Millisekunden werden verwendet, um die Methode für Elementobjektläufe der Array -Sammlung auszuführen
timer = setInterval (function () {
if (progressArray.length <= 0) {
// diesen Timer löschen, sonst wird er ständig ausgeführt (SetTimeout: Wie viele Millisekunden der Ausführung von Verzögerungen einmal; setInterval: Wie viele Millisekunden der Ausführung mehrmals)
ClearInterval (Timer);
} anders {
// Die Methode von Shift () wird verwendet, um das erste Element des Arrays daraus zu löschen und den Wert des ersten Elements zurückzugeben.
var entity = progressArray.shift ();
temparray.push (Entity);
// Führen Sie die Ausführungsmethode jedes Elementobjekts aus
Entity.run ();
}
},Timer);
</script>
</body>
</html>