完整源码：http://yuncode.net/code/c_5045e1288109d77

 

 

效果图：

html+js 页面跳转进度条_进度条

 

 

代码预览：

  1. <HTML> 
  2. <HEAD> 
  3. <TITLE>云代码</TITLE> 
  4. <SCRIPT type=text/javascript> 
  5. <!--  
  6. var ie5 = (document.all && document.getElementsByTagName);  
  7. var step = 0;  
  8. function setSB(v, el, inforEl, message) {  
  9. if (ie5 || document.readyState == "complete") {  
  10. filterEl = el.children[0];  
  11. valueEl = el.children[1];  
  12. if (filterEl.style.pixelWidth > 0) {  
  13. var filterBackup = filterEl.style.filter;  
  14. filterEl.style.filter = "";  
  15. filterEl.style.filter = filterBackup;  
  16. }  
  17. filterEl.style.width = v + "%";  
  18. vvalueEl.innerText = v + "%";  
  19. inforEl.innerText = message;  
  20. }  
  21. }  
  22. function setSBByStep(v, el, inforEl, message) {  
  23. if (ie5 || document.readyState == "complete") {  
  24. stepstep = step + v;  
  25. filterEl = el.children[0];  
  26. valueEl = el.children[1];  
  27. if (filterEl.style.pixelWidth > 0) {  
  28. var filterBackup = filterEl.style.filter;  
  29. filterEl.style.filter = "";  
  30. filterEl.style.filter = filterBackup;  
  31. }  
  32. filterEl.style.width = step + "%";  
  33. valueEl.innerText = step + "%"  
  34. inforEl.innerText = message;  
  35. }  
  36. }  
  37. function fakeProgress(v, el) {  
  38. if (v >= 101)  
  39. location.href="http://www.yuncode.net";  
  40. else {  
  41. setSB(v, el, infor, "页面正在跳转中，请稍候...");  
  42. window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 10);  
  43. }  
  44. }  
  45. //--> 
  46. </SCRIPT> 
  47. <SCRIPT language=javaScript> 
  48. </SCRIPT> 
  49. </HEAD> 
  50. <BODY bgColor=#f9f9f9 topMargin=100 onload=fakeProgress(0,sb)> 
  51. <P>　</P> 
  52. <P>　</P> 
  53. <P>　</P> 
  54. <!-- Status Bar Starts --> 
  55. <DIV align=center> 
  56.   <DIV id=sb 
  57. style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #99ccff; BORDER-LEFT: medium none; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left"> 
  58.     <DIV id=sbChild1 
  59. style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px"> 
  60.       <DIV style="BACKGROUND: #000000; WIDTH: 100%" ;height:12px; overflow:  
  61. hidden></DIV> 
  62.     </DIV> 
  63.     <DIV 
  64. style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV> 
  65.   </DIV> 
  66.   <!-- Status Bar Ends --> 
  67.   <P></P> 
  68.   <DIV id=infor 
  69. style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV> 
  70. </DIV> 
  71. </BODY> 
  72. </HTML>