Maison > Article > interface Web > JavaScript implémente un simple effet de barre de progression dynamique
JavaScript implémente un simple effet de barre de progression dynamique
- 亚连original
- 2018-05-26 14:26:402067parcourir
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>
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!