js滚动的进度条的4种编程方式（2008年12月26日更新）

时间：2009年03月26日作者：愚人码头查看次数:2,241 views评论次数：0

第一种方式，函数式：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>      
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>      
  3. <head>      
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />      
  5. <title>无标题文档</title>      
  6. </head>      
  7.       
  8. <body>      
  9. <div id=“allBox” style=“ width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  10.   <div id=“sonbox” style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px”></div>      
  11.   <strong style=“ text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  12. </div>  
  13. <script language=“javascript”>  
  14. var numberwidth=0;   
  15. var allWidth=document.getElementById(“allBox”).scrollWidth;   
  16. var loadWidth=document.getElementById(“sonbox”).scrollWidth;   
  17. var doScroll=window.setInterval((function(){   
  18.     numberwidth+=1;   
  19.     if(numberwidth>=((loadWidth/allWidth)*100)){   
  20.         window.clearInterval(doScroll);   
  21.         }else{   
  22.         document.getElementById(“sonbox”).style.width=numberwidth+”%”;   
  23.         }   
  24.     }),10);   
  25. </script>  
  26.       
  27. </body>      
  28. </html>  

第二种方式，数组式：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>      
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>      
  3. <head>      
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />      
  5. <title>无标题文档</title>      
  6. </head>      
  7.       
  8. <body>  
  9. <div id=“allBox” style=“ width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  10.   <div style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px”></div>      
  11.   <strong style=“ text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  12. </div>  
  13. <script type=“text/javascript”>  
  14. var loading = new Object(); //定义一个图片展示的对   
  15. loading = {   
  16.     loadWidth: 0,   
  17.     auto: ”",   
  18.     speed: 10,   
  19.     spWidth:0,   
  20.   
  21.     doScroll: function(dd) {   
  22.         loading.spWidth = (document.getElementById(dd).getElementsByTagName(“div”)[0].scrollWidth / document.getElementById(dd).scrollWidth) * 100;   
  23.         loading.auto = setInterval(function() { loading.dos(dd) }, loading.speed)   
  24.     },   
  25.     dos: function(aa) {   
  26.         //alert(loading.spWidth());   
  27.         loading.loadWidth += 1;   
  28.         //document.getElementById(“ggg”).innerHTML=document.getElementById(aa).getElementsByTagName(“div”)[0].scrollWidth+”——-”+document.getElementById(aa).scrollWidth;   
  29.         if (loading.loadWidth >= loading.spWidth) {   
  30.             clearInterval(loading.auto);   
  31.         } else {   
  32.             document.getElementById(aa).getElementsByTagName(“div”)[0].style.width = loading.loadWidth + ”%”;   
  33.         }   
  34.     }   
  35. };   
  36. loading.doScroll(“allBox”);   
  37. </script>  
  38. </body>      
  39. </html>  

第三种方式，面向对象：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>      
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>      
  3. <head>      
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />      
  5. <title>无标题文档</title>      
  6. </head>      
  7.       
  8. <body>      
  9. <div id=“ggg”></div>  
  10. <div id=“allBox” style=“ width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  11.   <div style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px”></div>      
  12.   <strong style=“ text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  13. </div>  
  14. <div id=“Div1″ style=“ width:200px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  15.   <div style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:100px”></div>      
  16.   <strong style=“ text-align:center;width:200px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  17. </div>  
  18. <script type=“text/javascript”>  
  19. //进度条的封装类   
  20. function loadingScroll(boxDiv,Speed){   
  21.     this.boxId=boxDiv;//外层的id   
  22.     this.scrollSpeed=Speed;//速度   
  23. }   
  24.   
  25. loadingScroll.prototype.doScroll = function() {   
  26.     var scrollWi = 0;//执行时的宽度   
  27.     var HimalayaN=document.getElementById(this.boxId).getElementsByTagName(“div”)[0] ;   
  28.     var HimalayaW=document.getElementById(this.boxId);   
  29.     var pointW=(HimalayaN.scrollWidth/HimalayaW.scrollWidth)*100;//原始的宽度比例   
  30.     var doScr=window.setInterval(function() {   
  31.         scrollWi += 1;   
  32.         if (scrollWi >= pointW) {   
  33.             window.clearInterval(doScr);   
  34.         } else {   
  35.             HimalayaN.style.width = scrollWi + ”%”;   
  36.         }   
  37.     }, this.scrollSpeed);   
  38. }   
  39. var ddddd = new loadingScroll(“allBox”, 10);   
  40. var aaaaa = new loadingScroll(“Div1″, 10);   
  41. ddddd.doScroll();   
  42. aaaaa.doScroll();   
  43. </script>  
  44.       
  45. </body>      
  46. </html>  

第一，第二种方式扩展不好，第三种方式，面向对象就比较容易扩展。

第四种方式，面向对象二：

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>      
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>      
  3. <head>      
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />      
  5. <title>无标题文档</title>      
  6. </head>      
  7.       
  8. <body>      
  9. <div id=“ggg”></div>  
  10. <div id=“allBox” style=“ width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  11.   <div style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px”></div>      
  12.   <strong style=“ text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  13. </div>  
  14. <div id=“Div1″ style=“ width:200px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center”>  
  15.   <div style=“height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:100px”></div>      
  16.   <strong style=“ text-align:center;width:200px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;”>你的经验是1000，下级是2000</strong>      
  17. </div>  
  18. <script type=“text/javascript”>  
  19. //进度条的封装类   
  20. var loadingScroll = {   
  21.     init : function(boxDiv,Speed){      
  22.         this.boxId=boxDiv;//外层的id      
  23.         this.scrollSpeed=Speed || 10;//速度 & 初始速度     
  24.     },   
  25.     doScroll : function() {      
  26.     var scrollWi = 0;//执行时的宽度      
  27.     var HimalayaN=document.getElementById(this.boxId).getElementsByTagName(“div”)[0] ;     
  28.     var HimalayaW=document.getElementById(this.boxId);      
  29.     var pointW=(HimalayaN.scrollWidth/HimalayaW.scrollWidth)*100;//原始的宽度比例      
  30.     var doScr=window.setInterval(function() {      
  31.          scrollWi += 1;      
  32.          if (scrollWi >= pointW) {      
  33.              window.clearInterval(doScr);      
  34.          } else {      
  35.              HimalayaN.style.width = scrollWi + ”%”;      
  36.          }      
  37.      }, this.scrollSpeed);      
  38.     }      
  39. }   
  40.   
  41. loadingScroll.init(“allBox”, 50);   
  42. loadingScroll.doScroll();   
  43. loadingScroll.init(“Div1″);   
  44. loadingScroll.doScroll();   
  45. </script>  
  46.       
  47. </body>      
  48. </html>  

这个方式是网友demo在本文中留言的那种烦死，和是第二种方式和第三种方式的“杂交”；这种方式目前比较流行，YUI框架就是使用这种方式的。再次感谢网友demo！！！

期待有更多的好的方式。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《js滚动的进度条的4种编程方式（2008年12月26日更新）》

如果你读了我的文章，觉得有帮助： 说明
分类：JS

您可能感兴趣的文章

0条评论

暂时没有评论！

发表评论

*

*