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:

JS realisiert dynamische Ladeeffekte des Fortschrittsbalkens
js+HTML5-Canvas zur Implementierung eines einfachen Ladebalken-Funktionsbeispiels (Fortschrittsbalken)
Detaillierte Erläuterung der Methode zur Verwendung von JS + WCF zur Implementierung einer Echtzeitüberwachung des Datenladens mit Fortschrittsbalken
Einfache Implementierung des Ladeeffekts des JS-Fortschrittsbalkens
Eine kurze Analyse des asynchronen Ladefortschrittsbalkens von JS
js ajax Ladefortschritt Barcode
pace.js-Plugin für den Fortschrittsbalken beim Laden von Seiten
Mit JavaScript lässt sich der Fortschrittsbalken zum Laden einer Webseite ganz einfach erreichen
Das jQuery-Plugin NProgress.js erstellt einen Fortschrittsbalken beim Laden von Webseiten
JavaScript zum Implementieren des Fortschrittsbalkencodes beim Laden der Seite

<<: Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen

>>: Der Unterschied zwischen MySQL-Benutzerverwaltung und PostgreSQL-Benutzerverwaltung