Πώς να δημιουργήσετε: Γραμμή προόδου JavaScript

Δημιουργία γραμμής προόδου

Πρώτο βήμα - Προσθέστε HTML:

<div id="myProgress">
  <div id="myBar"></div>
</div>

Δεύτερο βήμα - Προσθέστε CSS:

#myProgress {
  πλάτος: 100%%;
  χρώμα: γκρι;
{}
#myBar {
  πλάτος: 1%%;
  ύψος: 30px;
  χρώμα: πράσινο;
{}

Τρίτο βήμα - Προσθέστε JavaScript:

Δημιουργία δυναμικής γραμμής προόδου με JavaScript (εφέ κίνησης):

var i = 0;
λειτουργία move() {
  εάν (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    λειτουργία frame() {
      εάν (width >= 100) {
        clearInterval(id);
        i = 0;
      } αλλιώς {
        width++;
        elem.style.width = width + "%%";
      {}
    {}
  {}
{}

Try it yourself

Προσθήκη ετικέτας

Αν θέλετε να προσθέσετε ετικέτες για να δείξετε στον χρήστη την πρόοδο της διαδικασίας, προσθέστε έναν νέο στοιχείο μέσα (ή έξω) από τη γραμμή προόδου:

Πρώτο βήμα - Προσθέστε HTML:

<div id="myProgress">
  <div id="myBar">10%%</div>
</div>

Δεύτερο βήμα - Προσθέστε CSS:

#myBar {
  πλάτος: 10%;
  ύψος: 30px;
  background-color: #04AA6D;
  text-align: center; /* Κεντρική οριζόντια θέση (αν χρειάζεται) */
  line-height: 30px; /* Καθορισμός κεντρικής οριζόντιας θέσης */
  χρώμα: λευκό;
{}

Try it yourself

Τρίτο βήμα - Προσθέστε JavaScript:

Αν θέλετε να ενημερώσετε δυναμικά το κείμενο ενός ετικέτας, ώστε να είναι ίσο με την πλάτος της γραμμής προόδου, προσθέστε το εξής:

var i = 0;
λειτουργία move() {
  εάν (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    λειτουργία frame() {
      εάν (width >= 100) {
        clearInterval(id);
        i = 0;
      } αλλιώς {
        width++;
        elem.style.width = width + "%%";
        elem.innerHTML = width + "%%";
      {}
    {}
  {}
{}

Try it yourself