Home > Article > Web Front-end > Use JS to create animated progress bar function

Use JS to create animated progress bar function

php中世界最好的语言Original: 2018-06-11 10:55:231737browse

This time I will introduce to you what are the precautions for using JS to create an animated progress bar function. The following is a practical case, let's take a look.

1. Effect

##2. Source code

<html>
<head>
  <script type="text/javascript">
    window.onload = function () {
      var myProgress = document.getElementById("myProgress");
      var mySpan = document.getElementById("mySpan");
      var value = myProgress.value;
      mySpan.innerText = value + "%";
      var ID = setInterval(function () {
        value = myProgress.value;
        if (value < 100) {
          value += 10;
          myProgress.value = value;
          mySpan.innerText = value + "%";
        }
        if (value == 100) {
          clearInterval(ID);
        }
      }, 500);
    }
  </script>
</head>
<body>
<label for="myProgress">进度条</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</body>
</html>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Use JS to create animated progress bar function

Related articles