Maison > Article > interface Web > Utilisez JS pour créer une fonction de barre de progression animée

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

php中世界最好的语言original: 2018-06-11 10:55:231797parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser Vue+TriableArticle suivant：Utiliser Vue+Triable

Articles Liés

Voir plus