JavaScript implémente le code natif pour la barre de progression-js tutoriel-php.cn

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

黄舟

Libérer： 2017-11-21 09:29:19

original

2202 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!