Heim > Artikel > Web-Frontend > Von jQuery_jquery implementierter Fortschrittsbalkeneffekt

Von jQuery_jquery implementierter Fortschrittsbalkeneffekt

WBOYOriginal: 2016-05-16 15:50:261168Durchsuche

In einigen spezifischen Szenarien kann die Anwendung des Fortschrittsbalkeneffekts die Benutzerfreundlichkeit der Website verbessern, sodass Benutzer den Fortschritt nachvollziehen und ihre Geduld mit dem Fortschritt erhöhen können. Andernfalls kann es direkt zum Schließen der Seite kommen. Dies führt letztendlich dazu, dass die Website Benutzer verliert. Das Folgende ist der mit jQuery implementierte Fortschrittseffektcode.

<!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>

Der obige Code implementiert den häufig verwendeten Fortschrittsbalkeneffekt. Wenn der Fortschrittsbalken vorrückt, gibt es eine Prozentmarkierung, was sehr benutzerfreundlich ist.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Methode zum Erwerb WEB-sicherer Farblisten_Javascript-KenntnisseNächster Artikel：JavaScript-Methode zum Erwerb WEB-sicherer Farblisten_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen