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

2009-03-26 分类：JavaScript 阅读(5901) 评论(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！！！

期待有更多的好的方式。

赞(0) 打赏
未经允许不得转载：WEB前端开发 » js滚动的进度条的4种编程方式（2008年12月26日更新）

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)前端招聘 (25)前端开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)前端开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏