HTML Fortschrittstag Beispiel

Einführung

Das HTML <progress>-Tag wird verwendet, um den Fortschritt einer Aufgabe anzuzeigen. Es wird normalerweise verwendet, um eine Fortschrittsanzeige für eine Aufgabe innerhalb einer HTML-Webseite anzuzeigen. In diesem Lab werden Sie lernen, wie Sie eine einfache Fortschrittsanzeige mit dem HTML <progress>-Tag erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Erstellen der HTML-Struktur

Erstellen Sie zunächst die grundlegende HTML-Struktur für die Fortschrittsanzeige mit dem folgenden Code in der Datei index.html:

<!doctype html>
<html>
  <head>
    <title>HTML Progress Tag Example</title>
  </head>
  <body>
    <h1>HTML Progress Tag</h1>
    <label for="progress-bar">Task Progress:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

In diesem Code haben wir die erforderlichen Tags für das Erstellen einer HTML-Seite, ein Überschriftstag für den Seitentitel, ein Label-Tag, um unsere Fortschrittsanzeige zu beschreiben, und das <progress>-Tag mit einem id-Attribut von "progress-bar" und einem max-Attribut von 100.

Setzen des Werts der Fortschrittsanzeige

Um den Wert der Fortschrittsanzeige zu setzen, fügen Sie das value-Attribut zum Fortschrittstag hinzu, mit einem Wert zwischen 0 und 100. Beispielsweise um die Fortschrittsanzeige auf 50% zu setzen, fügen Sie den folgenden Code nach dem <progress>-Tag hinzu:

<progress id="progress-bar" max="100" value="50"></progress>

Hinzufügen von JavaScript, um die Fortschrittsanzeige zu aktualisieren

Um die Fortschrittsanzeige dynamisch zu aktualisieren, werden wir etwas JavaScript hinzufügen, um das value-Attribut des Fortschrittstags zu ändern.

Fügen Sie den folgenden JavaScript-Code zur HTML-Datei hinzu:

<script>
  let progressBar = document.getElementById("progress-bar");
  let percent = 0;

  function updateProgress() {
    if (percent == 100) {
      clearInterval(intervalId);
      return;
    }
    progressBar.value = percent;
    percent++;
  }

  let intervalId = setInterval(updateProgress, 100);
</script>

In diesem Code haben wir eine Funktion namens updateProgress() erstellt, die den Wert der Fortschrittsanzeige alle 100 Millisekunden aktualisiert. Die Funktion überprüft, ob die Fortschrittsanzeige bei 100% ist und stoppt das Intervall, wenn dies der Fall ist.

Schließlich setzen wir das Intervall, indem wir setInterval() mit unserer updateProgress()-Funktion und einem Zeitintervall von 100 Millisekunden aufrufen.

Speichern Sie die Datei index.html und öffnen Sie sie in einem Webbrowser. Sie sollten jetzt eine Fortschrittsanzeige sehen, deren Wert im Laufe der Zeit zunimmt, bis er 100% erreicht.

Zusammenfassung

Indem Sie die obigen Schritte befolgen, haben Sie gelernt, wie Sie eine einfache Fortschrittsanzeige mit dem <progress>-Tag in HTML erstellen. Darüber hinaus haben Sie gelernt, wie Sie die Fortschrittsanzeige dynamisch mit JavaScript aktualisieren. Diese Technik kann nützlich sein, um den Fortschritt einer langlaufenden Aufgabe anzuzeigen oder den Fortschritt eines Dateiuploads anzugeben.

HTML Task Fortschritt

Einführung

Praxis statt nur Theorie.

Erstellen der HTML-Struktur

Setzen des Werts der Fortschrittsanzeige

Interaktive Übungen statt trockener Theorie.

Hinzufügen von JavaScript, um die Fortschrittsanzeige zu aktualisieren

Zusammenfassung