jQuery实现的进度条效果

本文主要给大家介绍的是jQuery实现的进度效果的实例代码，其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式)有需要的小伙伴可以参考下。

在某些特定的场景下，应用进度条效果，可以提高网站的人性化程度，能够让用户能够掌握进度，增加对进度的耐心，否则可能直接导致关闭页面，从来导致网站流失用户，下面就是用过jQuery实现的进度效果代码。

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8"> 
5. <title>武林网</title> 
6. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
7. <style type="text/css"> 
8. #progress  
9. { 
10. background:white; 
11. height:20px; 
12. padding:2px; 
13. border:1px solid green; 
14. margin:2px; 
15. } 
16. #progress span  
17. { 
18. background:green; 
19. height:16px; 
20. text-align:center; 
21. padding:1px; 
22. margin:1px; 
23. display:block; 
24. color:yellow; 
25. font-weight:bold; 
26. font-size:14px; 
27. width:0%; 
28. } 
29. </style> 
30. <script type="text/javascript">  
31. var progress_node_id = "progress";  
32. function SetProgress(progress) {  
33. if (progress) {  
34. $("#" + progress_node_id + " > span").css("width", String(progress) + "%");  
35. $("#" + progress_node_id + " > span").html(String(progress) + "%");  
36. }  
37. }  
38. var i = 0;  
39. function doProgress() {  
40. if (i > 100) {  
41. alert("Progress Bar Finished!");  
42. return;  
43. }  
44. if (i <= 100) {  
45. setTimeout("doProgress()", 500);  
46. SetProgress(i);  
47. i++;  
48. }  
49. }  
50. $(document).ready(function() {  
51. doProgress();  
52. });  
53. </script> 
54. </head> 
55. <body> 
56. <h1>jQuery实现进度条效果代码</h1> 
57. <p>原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），刷新查看</p> 
58. <div id="progress"><span></span></div> 
59. </body> 
60. </html> 

以上代码实现了常用的进度条效果，在进度条推进的时候有百分比标注，非常的人性化。