search

Home >Web Front-end >JS Tutorial >How to use JS to implement dynamic progress bar

How to use JS to implement dynamic progress bar

php中世界最好的语言
php中世界最好的语言Original
2018-05-26 15:36:062090browse

This time I will show you how to use JS to implement a dynamic progress bar, and what are the precautions for using JS to implement a dynamic progress bar. 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!

Recommended reading:

How to operate nodejs to render page resources through response writeback

How to use the vue-cli development environment Implement cross-domain requests

The above is the detailed content of How to use JS to implement dynamic progress bar. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use Sortable in VueNext article：How to use Sortable in Vue

Related articles

See more