recherche

Maison >interface Web >js tutoriel >Comment utiliser JS pour implémenter une barre de progression dynamique

Comment utiliser JS pour implémenter une barre de progression dynamique

php中世界最好的语言
php中世界最好的语言original
2018-05-26 15:36:062130parcourir

Cette fois, je vais vous montrer comment utiliser JS pour implémenter une barre de progression dynamique, et quelles sont les précautions à prendre pour utiliser JS pour implémenter une barre de progression dynamique. Ce qui suit est un cas pratique, jetons un coup d'œ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 :

Comment utiliser nodejs pour restituer les ressources de la page via l'écriture de réponse

Comment utiliser vue- Environnement de développement cli Implémenter des requêtes inter-domaines

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：Comment utiliser Sortable dans VueArticle suivant：Comment utiliser Sortable dans Vue

Articles Liés

Voir plus