JavaScript implémente un simple effet de barre de progression dynamique-js tutoriel-php.cn

JavaScript implémente un simple effet de barre de progression dynamique

亚连

Libérer： 2018-05-26 14:26:40

original

2107 Les gens l'ont consulté

Cet article présente principalement JavaScript pour réaliser en détail l'effet de barre de progression dynamique simple, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

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

1. Effet

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utilisation de la fonctionnalité H5 FormData pour télécharger des fichiers sans actualiser

Une explication détaillée de l'utilisation de diverses méthodes AJAX

Une brève analyse du problème de mise en cache d'IE pour les résultats des requêtes Ajax

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!