JavaScript zum Erzielen eines Fortschrittsbalkeneffekts

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des Fortschrittsbalkeneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Effektbild ist diesmal wie folgt:

Dieses Beispiel ist nicht schwer durchzuführen. Als ich es übte, war der neue Wissenspunkt, die Funktion window.getComputedStyle() zu verwenden, um den Breitenwert des Elements abzurufen.

Die allgemeine Idee besteht darin, zunächst eine Div-Box mit einer Breite von 0 in eine Div-Box einzufügen und dann einen Timer in der onclick Rückruffunktion der Schaltfläche zu verwenden, um ihren Breitenwert zu ändern

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        #Behälter {
            Breite: 500px;
            Höhe: 200px;
            Rand: 50px automatisch;
            Position: relativ;
        }

        #Kasten {
            Breite: 260px;
            Höhe: 30px;
            Rand: 1px rosa durchgehend;
            Rahmenradius: 16px;
            Rand unten: 20px;
            Polsterung: 1px;
            Überlauf: versteckt;
        }

        #Fortsetzung {
            Breite: 0;
            Höhe: 100%;
            Hintergrundfarbe: rosa;
            Rahmenradius: 16px;
        }

        #btn {
            Position: absolut;
            Rand links: 110px;
            Breite: 50px;
            Höhe: 30px;
        }


        #text {
            Anzeige: Block;
            Position: relativ;
            links: 120px;
            Rand unten: 20px;
        }

    </Stil>
</Kopf>

<Text>
    <div id="Behälter">
        <div id="box" Dateninhalt-vor="22">
            <div id="forts"></div>
        </div>
        <div id="text">0 %</div>
        <button id="btn">Senden</button>
    </div>
    <Skript>
        let box = document.getElementById("box");
        let btn = document.getElementById("btn");
        let cont = document.getElementById("cont");
        let text = document.getElementById("text");

        Funktion getstyle(Objekt, Name) {
            wenn (window.getComputedStyle) {
                gibt window.getComputedStyle(obj, null)[name] zurück;
            }
            anders {
                gibt obj.currentStyle[name] zurück;
            }
        }

        btn.onclick = Funktion () {
            sei ini = 0;
            let num = setInterval(() => {

                let tem = parseInt(window.getComputedStyle(cont, null)["Breite"]);
                sei jetzt = tem + 26;

                wenn (tem >= 260) {
                    console.log(jetzt);
                    Intervall löschen(num);
                    zurückkehren;
                }
                
                cont.style.width = jetzt + "px";
                ini = ini + 10;
                text.innerText = ini + "%";

            }, 80);
        }
    </Skript>

</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:

Mehrere Methoden für den Javascript-Fortschrittsbalken
So implementieren Sie einen Fortschrittsbalken in js
Mit JavaScript lässt sich der Fortschrittsbalken zum Laden einer Webseite ganz einfach erreichen
js Fortschrittsbalken-Implementierungscode
Code-Organisation für die Implementierung des JS-Fortschrittsbalkeneffekts
JS realisiert den Effekt eines kreisförmigen Fortschrittsbalkens (von 0 bis 100 %)
Einfaches Fortschrittsbalken-Steuerelement, geschrieben in Javascript, jquery, css
Fortschrittsbalkeneffekt mit CSS+JS implementiert
js realisiert die Audiosteuerungs-Fortschrittsbalkenfunktion
Verwenden der Sitzung mit Javascript in PHP zum Implementieren der Fortschrittsbalkenfunktion für den Dateiupload

<<: So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)

>>: Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

js zur Realisierung der Web-Message-Board-Funktion

JavaScript zum Erzielen eines Fortschrittsbalkeneffekts

js zur Realisierung der Web-Message-Board-Funktion

CSS - overflow:hidden in Projektbeispielen

Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Detailliertes Beispiel für das Linux-Allround-Systemüberwachungstool dstat

So verwenden Sie Watch-Listener in Vue2 und Vue3

Vue implementiert einen Countdown zwischen angegebenen Daten

Detailliertes Beispiel für die Verwendung einer asynchronen JS-Fetch-Anforderung

Welche Beziehung besteht zwischen Mapper-SQL-Anweisungsfeldern und Entitätsklassen-Attributnamen?

Artikel empfehlen

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

Linux Überprüfen Sie den Installationsort der Software einfache Methode

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

mysql installer web community 5.7.21.0.msi grafik-tutorial zur installation

Detaillierte Erklärung der Tomcat-Verzeichnisstruktur

Beispiel für die Konvertierung von Webpack-Bildern in Base64

Lösung für das Jitter-Problem beim CSS3-Transformationsübergang

Details zur MySQL-Transaktionsisolationsebene

SVN-Installation und grundlegende Bedienung (grafisches Tutorial)

Zusammenfassung der Vue Watch-Überwachungsmethoden

Anfänger verstehen das MySQL-Deadlock-Problem anhand des Quellcodes

Detaillierte Erklärung der Verwendung und Unterschiede zwischen Indizes und Ansichten in MySQL

XHTML-Tutorial für den Einstieg: Formular-Tags

Detaillierte Erläuterung der Ein- und Ausgabeverwaltung des Linux-Systems und der allgemeinen Funktionen von vim

Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen