search

Home  >  Article  >  Web Front-end  >  jQuery implements progress bar effect code_jquery

jQuery implements progress bar effect code_jquery

WBOY
WBOYOriginal
2016-05-16 15:25:041383browse

In some specific scenarios, applying the progress bar effect can improve the user-friendliness of the website, allowing users to grasp the progress and increase their patience with the progress. Otherwise, it may directly lead to the closure of the page, which will eventually cause the website to lose users. The following is the progress effect code implemented using 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>

The above is the jQuery code to implement the progress bar effect. I hope it will be helpful to everyone in learning jquery programming

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js multiple methods to determine whether a certain app is installed on the mobile terminal_javascript skillsNext article：js multiple methods to determine whether a certain app is installed on the mobile terminal_javascript skills

Related articles

See more