Utilisez JS pour créer une fonction de barre de progression animée-js tutoriel-php.cn

Utilisez JS pour créer une fonction de barre de progression animée

php中世界最好的语言

Libérer： 2018-06-11 10:55:23

original

1788 Les gens l'ont consulté

Cette fois, je vais vous présenter les précautions d'utilisation de JS pour créer une fonction de barre de progression animée. Ce qui suit est un cas pratique, jetons-y un œil.

1. Effet

2. Code source

<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>

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce cas. article, plus excitant Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Application de modules angulaires2 et partagés

Vue+Nuxt.js pour le rendu côté serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!