JavaScript implements simple dynamic progress bar effect-JS Tutorial-php.cn

JavaScript implements simple dynamic progress bar effect

亚连

Release： 2018-05-26 14:26:40

Original

2106 people have browsed it

This article mainly introduces JavaScript to realize the simple dynamic progress bar effect in detail. It has certain reference value. Interested friends can refer to it.

The example of this article shares with everyone the js dynamic progress bar effect. The specific code for the progress bar effect is for your reference. The specific content is as follows

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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Using the H5 feature FormData to upload files without refreshing

A detailed explanation of the use of various AJAX methods

A brief analysis of IE’s caching problem for Ajax request results

The above is the detailed content of JavaScript implements simple dynamic progress bar effect. For more information, please follow other related articles on the PHP Chinese website!