Comment implémenter un simple effet de barre de progression en HTML5 ? Implémentation d'une barre de progression dynamique (exemple de code)

Lors de la navigation sur un site Web, vous rencontrez souvent un chargement de page. À ce moment, une barre de progression dynamique apparaîtra sur la page, qui continuera à défiler jusqu'à ce que le chargement soit terminé. Alors, comment une telle barre de progression dynamique est-elle implémentée ? Cet article vous présentera comment implémenter un effet de barre de progression dynamique simple en HTML5 et partagera avec vous le code pour le chargement par défilement de la barre de progression dynamique sur la page. J'espère que cela sera utile. toi.

Tout d’abord, comprenons le principe du HTML5 pour obtenir un simple effet de barre de progression dynamique.

Le puissant HTML5 nous fournit une nouvelle balise . Cette balise peut obtenir un effet de barre de progression statique (comme indiqué ci-dessous), puis en ajoutant du code js simple, nous pouvons y parvenir. Défilement de la barre de progression. effet.

Ci-dessous, nous utilisons un exemple de code simple pour présenter la méthode d'implémentation de la barre de progression dynamique en HTML5.

Code HTML5 :

<progress max="100" value="0" id="pg"></progress>

L'utilisation des balises est très simple, la signification est très claire, et il n'y a que les deux attributs ci-dessus, max représente la quantité de tâches qui doivent être accomplies, et la valeur est le nombre actuel de tâches terminées (voir l'image ci-dessus pour le style).

Code js :

var pg=document.getElementById('pg'); 
setInterval(function(e){
   if(pg.value!=100) pg.value++;      
   else pg.value=0;
},100);

Rendu :

L'implémentation ci-dessus est non seulement plus simple et plus sémantique, cela simplifie également grandement notre code et le rend plus flexible, il est donc très nécessaire de maîtriser l'utilisation du html5 !

Cependant, la prise en charge par le navigateur de la balise html5 est également un problème que nous devons prendre en compte. Jetons un coup d'œil à la prise en charge par le navigateur de la balise

Résumé : ce qui précède est la méthode html5+js présentée dans cet article pour obtenir un effet de barre de progression simple. Vous pouvez l'essayer vous-même. J'espère que cela vous sera utile. à votre apprentissage aidé.

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!