Native JS-Implementierung des Ladefortschrittsbalkens
|
Dieser Artikel zeigt einen Spezialeffekt für dynamische Ladefortschrittsbalken, der von nativem JS implementiert wurde. Der Effekt ist wie folgt:
Der implementierte Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Native JS-Implementierung des Ladefortschrittsbalkens</title>
<Stil>
#fortschrittsBox {
Breite: 300px;
Höhe: 40px;
Rand: 1px durchgezogen #C8C8C8;
Hintergrund: weiß;
Position: relativ;
Rand: 0 automatisch;
Rand oben: 100px;
}
#Fortschrittsleiste {
Position: absolut;
links: 0;
oben: 0;
Z-Index: 2;
Höhe: 40px;
Breite: 100 %;
Zeilenhöhe: 40px;
Farbe: weiß;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Schriftstärke: fett;
Schriftfamilie: Georgia;
Clip: Rechteck (0px, 0, 40px, 0px);
Hintergrund: #00A1F5;
}
#FortschrittsText {
Position: absolut;
links: 0;
oben: 0;
Z-Index: 1;
Breite: 100 %;
Höhe: 40px;
Zeilenhöhe: 40px;
Farbe: Schwarz;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Schriftstärke: fett;
Schriftfamilie: Georgia;
}
</Stil>
<Skript>
fenster.onload = Funktion () {
// Aktuellen Startzustandswert setzen,
// Verwenden Sie in realen Situationen HTML5s onprogress und onload, um dies abzuschließen. // Sie können auch mit dem Hintergrund zusammenarbeiten, um Daten in Echtzeit über Ajax zurückzugeben. var iNow = 0;
//Setze den Timer var timer = setInterval(function () {
// Wenn der aktuelle Wert 100 ist
wenn (iNow == 100) {
// Den Timer löschen clearInterval(timer);
}anders {
// Addiere 1 zum aktuellen Statuswert
iJetzt += 1;
// Rufen Sie die Ausführungsstatusfunktion auf und übergeben Sie den Statuswert progressFn(iNow);
}
}, 30);
Funktion progressFn(cent) {
// Holen Sie sich das äußerste div
var oDiv1 = document.getElementById('progressBox');
// Holen Sie sich das Div des inneren Fortschrittsbalkens
var oDiv2 = document.getElementById('progressBar');
// Holen Sie sich das Div, wenn sich der innere Text ändert
var oDiv3 = document.getElementById('progressText');
// Gesamtbreite des Fortschrittsbalkens abrufen var allWidth = parseInt(getStyle(oDiv1, 'width'));
// Den Textinhalt der beiden inneren Divs gleich setzen oDiv2.innerHTML = cent + '%';
oDiv3.innerHTML = Cent + '%';
// Breite des Clips ändern oDiv2.style.clip = 'rect(0px, ' + cent / 100 * allWidth + 'px, 40px, 0px)';
// Den Attributwert des aktuellen Elements abrufen function getStyle(obj, attr) {
// IE-kompatibel
wenn (obj.aktuellerStil) {
returniere obj.currentStyle[attr];
}anders {
// Der zweite Parameter ist false, was eine übliche Schreibweise ist. Er dient der Kompatibilität mit alten Versionen. return getComputedStyle(obj, false)[attr];
}
}
}
};
</Skript>
</Kopf>
<Text>
<div id="fortschrittsBox">
<div id="Fortschrittsleiste">0 %</div>
<!-- Stellen Sie die zweite Ebene so ein, dass die Farbe des Textes geändert wird, wenn der Fortschritt den Text überschreitet-->
<div id="progressText">0 %</div>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen
>>: Der Unterschied zwischen MySQL-Benutzerverwaltung und PostgreSQL-Benutzerverwaltung
Artikel empfehlen
VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration
1. Laden Sie das CentOS-Image herunter 1.1 Downlo...
Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall
So überprüfen Sie den Status der Linux-Firewall 1...
Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin
Wenn das Feld, in dem der Name gespeichert ist, d...
So legen Sie einen Alias für einen benutzerdefinierten Pfad in Vue fest
So konfigurieren Sie benutzerdefinierte Pfadalias...
Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.
In Schreibstilen können wir diese Situation oft s...
Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.17
Ich werde die Probleme aufzeichnen, die während d...
Lösen Sie das Problem, dass beim Ausführen von Docker zwei Ports gestartet werden, die unterschiedliche Ports belegen
Problembeschreibung: Nach der Ausführung von dock...
Detaillierte Erklärung der Ansichten in MySQL
Sicht: Ansichten in MySQL haben viele Ähnlichkeit...
Entwicklung von WeChat-Applet-Komponenten: Visuelle Sitzplatzauswahlfunktion im Kino
Inhaltsverzeichnis 1. Einleitung 1. Bauteildaten ...
Tutorial zur Installation von VMware, Nmap und Burpsuite
Inhaltsverzeichnis VMware BurpSuite 1. Virtuelles...
Vorschläge zur Optimierung der Webseiten-Kopfzeile
Logo-Optimierung: 1. Das Logobild sollte so klein...
Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array
Pseudo-Arrays und Arrays In JavaScript sind mit A...
So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate
Einführung Das mysql-utilities-Toolset ist eine S...
Prinzipien und Beispiele für Lambda-Ausdrücke
Lambda-Ausdrücke Lambda-Ausdrücke, auch Closures ...
Detaillierte Erklärung zum Anzeigen und Einstellen des SQL-Modus in MySQL
Anzeigen und Einstellen des SQL-Modus in MySQL My...