recherche

Maison >interface Web >js tutoriel >jQuery implémente l'effet de barre de progression code_jquery

jQuery implémente l'effet de barre de progression code_jquery

WBOY
WBOYoriginal
2016-05-16 15:25:041399parcourir

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery进度条效果代码</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.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>

Ce qui précède est le code jQuery pour implémenter l'effet de barre de progression. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation jquery

.
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 plusieurs méthodes pour déterminer si une certaine application est installée sur le terminal mobile_javascript skillsArticle suivant：js plusieurs méthodes pour déterminer si une certaine application est installée sur le terminal mobile_javascript skills

Articles Liés

Voir plus