Maison > Article > interface Web > JavaScript implémente le code natif pour la barre de progression

JavaScript implémente le code natif pour la barre de progression

黄舟original: 2017-11-21 09:29:192182parcourir

Dans notre travail de développement quotidien, je pense que les amis connaissent La barre de progression joue toujours un rôle très important dans notre projet, nous vous donnerons donc aujourd'hui les détails sous l'introduction de <.>JavaScript, un exemple d'analyse d'implémentation de la barre de progression !

setTimeout et clearTimeou

<html> 
<head> 
<title>进度条</title> 
<style type="text/css">  
.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
  function run(){  
        var bar = document.getElementById("bar"); 
        var total = document.getElementById("total"); 
    bar.style.width=parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      window.clearTimeout(timeout); 
      return; 
    } 
    var timeout=window.setTimeout("run()",100); 
  } 
    window.onload = function(){  
       run(); 
    }  
</script> 
  
</head> 
<body> 
  <div class="container"> 
   <div id="bar" style="width:0%;"></div>  
  </div>  
  <span id="total"></span> 
</body> 
</html>

Rendu :

<html>  
<head>  
<title>进度条</title>  
<style type="text/css">  
.processcontainer{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 } 
#processbar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
     window.clearInterval(bartimer);  
  }  
 }  
var bartimer = window.setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
</script>  
</head>  
<body>  
  <div class="processcontainer">  
   <div id="processbar" style="width:0%;"></div>  
  </div>  
</body>  
</html>

Rendu :

3. La différence entre setTimeout et setInterval

setTimeout() n'exécute le code qu'une seule fois. Si vous souhaitez l'appeler plusieurs fois, utilisez setInterval(). La méthode setInterval() continuera d'appeler la fonction jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée, ou que le code lui-même appelle à nouveau setTimeout().

Résumé :

Je crois qu'en étudiant cet article, vous aurez une meilleure compréhension de l'implémentation JavaScript des progrès bar. Lorsque vous rencontrez Lorsque vous répondez à la même exigence, vous pouvez vous référer à cet article. J'espère qu'il vous sera utile !

Recommandations associées :

Téléchargement natif JS de fichiers volumineux affichant une barre de progression - Téléchargement de fichiers PHP

Un exemple de JavaScript implémentant une barre de progression basée sur une minuterie

JavaScript implémentant une progression de contrôle audio bar

Introduction à la méthode d'affichage de la barre de progression du processus en combinant JS et HTML

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!

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：JS réalise l'effet d'agrandissement tactile du commerce électroniqueArticle suivant：JS réalise l'effet d'agrandissement tactile du commerce électronique

Articles Liés

Voir plus