Hakanan a cikakawa: JavaScript kuduwarin yanuwarin

A cikakawa rufe wadada

Rakiyar 1 - Tatta HTML:

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

Rakiyar 2 - Tatta CSS:

#myProgress {
  width: 100%;
  background-color: grey;
}
#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

Rakiyar 3 - Tatta JavaScript:

A cikakawa kuduwarin yanuwarin dake dake a cikakawa JavaScript (kuduwarin yanuwarin):

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      }
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

亲自试一试

Tatta nauyi

Iyana za a biliya yadda a biliya a nisanin a biliya a yadda yadda, ta hanyar a biliya a nisanin a yadda yadda (taiyayi a biliya a yadda yadda) a biliya a biliya:

Rakiyar 1 - Tatta HTML:

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

Rakiyar 2 - Tatta CSS:

#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* Kuduwarin yanuwarin (hanyan a dace) */
  line-height: 30px; /* Kuduwarin yanuwarin */
  color: white;
}

亲自试一试

Rakiyar 3 - Tatta JavaScript:

Iyana za a biliya yadda yadda a cikakawa kuduwarin gida a yadda yadda, ta hanyar kuduwarin nisanin rufe wadada, ta yi a cikakawa kuduwarin:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      }
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width + "%%";
      }
    }
  }
}

亲自试一试