Maison > Article > interface Web > Analyse des étapes pour implémenter une barre de progression dynamique à l'aide de JS

Analyse des étapes pour implémenter une barre de progression dynamique à l'aide de JS

php中世界最好的语言original: 2018-05-02 10:33:593609parcourir

Cette fois, je vais vous apporter une analyse des étapes pour implémenter une barre de progression dynamique en JS. Quelles sont les précautions pour implémenter une barre de progression dynamique en JS. cas, jetons un coup d'oeil.

L'exemple de cet article partage le code spécifique pour réaliser l'effet de barre de progression dynamique en js pour votre référence. Le contenu spécifique est le suivant

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 pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :

Explication détaillée des étapes permettant à Vue d'effectuer la commutation du carrousel de composants internes

Angular5 ajoute des classes de style aux étiquettes des composants Description de l'étape

Étapes détaillées pour utiliser Sortable avec Vue

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!

php class JS

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：Explication détaillée des étapes d'utilisation de Sortable dans VueArticle suivant：Explication détaillée des étapes d'utilisation de Sortable dans Vue

Articles Liés

Voir plus