Maison > interface Web > js tutoriel > JavaScript implémente un simple effet de barre de progression dynamique

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

亚连
Libérer: 2018-05-26 14:26:40
original
2150 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal