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
Was Sie beim Gestalten von Webseiten für Mobilgeräte mit kleinem Bildschirm beachten sollten
Der Grund dafür ist, dass dieser Webseitentyp auf ...
Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig
Es gibt eine Interviewfrage, die Folgendes erforde...
So stellen Sie DoNetCore mit Nginx in der Alibaba Cloud bereit
Grundlegende Umgebungskonfiguration Bitte kaufen ...
Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs
01PARTCoreWebApi Tutorial Lokale Demonstrationsum...
So verwenden Sie den Linux-Befehl tr
01. Befehlsübersicht Der Befehl tr kann Zeichen a...
HTML-Grundstruktur_Powernode Java Academy
Wenn wir lernen, Webseiten zu entwickeln, ist das...
.NETCore Docker implementiert Containerisierung und privates Image-Repository-Management
1. Einführung in Docker Docker wurde in der Progr...
jQuery realisiert die volle Funktion des Einkaufswagens
In diesem Artikel wird der spezifische Code von j...
So verwenden Sie JavaScript, um mehrere gängige Browser über userAgent zu bestimmen
Vorwort Normalerweise müssen Sie beim Erstellen v...
HTML Tutorial: Sammlung häufig verwendeter HTML-Tags (4)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
Detaillierte Konfiguration des mysql8.x-Docker-Remotezugriffs
Inhaltsverzeichnis Umweltbedingungen Aufgetretene...
Zusammenfassung einiger Gedanken zur Binlog-Optimierung in MySQL
Frage Frage 1: Wie kann der Leistungsverlust beho...
Implementierung der Docker-Bereitstellung von Django+Mysql+Redis+Gunicorn+Nginx
I. Einleitung Die Docker-Technologie erfreut sich...
So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework
Was ist ORM? ORM steht für Object Relational Mapp...
JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)
In diesem Artikel wird der spezifische JavaScript...