Effet de barre de progression implémenté par jQuery

Effet de barre de progression implémenté par jQuery_jquery

WBOY

Libérer： 2016-05-16 15:50:26

original

1164 Les gens l'ont consulté

Dans certains scénarios spécifiques, l'application de l'effet de barre de progression peut améliorer la convivialité du site Web, permettant aux utilisateurs de comprendre la progression et d'augmenter leur patience face à la progression, sinon cela peut directement conduire à la fermeture de la page, ce qui finira par faire perdre des utilisateurs au site Web. Voici le code d'effet de progression implémenté à l'aide de jQuery.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#progress 
{
 background:white;
 height:20px;
 padding:2px;
 border:1px solid green;
 margin:2px;
}
#progress span 
{
 background:green;
 height:16px;
 text-align:center;
 padding:1px;
 margin:1px;
 display:block;
 color:yellow;
 font-weight:bold;
 font-size:14px;
 width:0%;
}
</style>
<script type="text/javascript"> 
 var progress_node_id = "progress"; 
 function SetProgress(progress) { 
  if (progress) { 
   $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); 
   $("#" + progress_node_id + " > span").html(String(progress) + "%"); 
  } 
 } 
 var i = 0; 
 function doProgress() { 
 if (i > 100) { 
  alert("Progress Bar Finished!"); 
  return; 
 } 
 if (i <= 100) { 
  setTimeout("doProgress()", 500); 
  SetProgress(i); 
  i++; 
 } 
 } 
 $(document).ready(function() { 
  doProgress(); 
 }); 
</script>
</head>
<body>
<h1>jQuery实现进度条效果代码</h1>
<p>原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），刷新查看</p>
<div id="progress"><span></span></div>
</body>
</html>

Copier après la connexion

Le code ci-dessus implémente l'effet de barre de progression couramment utilisé. Lorsque la barre de progression avance, il y a une marque de pourcentage, ce qui est très convivial.