网页加载的进度条是什么原理？用javascript做。
思路：进度条的总长度：进度条的当前长度 = 数据总长度：数据当前加载长度。
代码：
<style> * {margin:0px; padding:0px} .box {height:40px; width:500px; background:#ccc; border:1px solid #ccc; position:relative; margin:100px auto;} .box #div1 {height:100%; width:0%; background:green; } span {position:absolute; top:0; left:0; line-height:40px; width:100%; height:100%; text-align:center; font-size:28px; font-weight:bold; color:#fff;} </style> <script> window.onload=function(){ var oDiv = document.getElementById('div1'); var oTxt = document.getElementById('txt'); var count = 0; var total = 77; for(var i=0;i<77;i++) { var oImg = new Image(); oImg.src= ''+i+'.jpg'; oImg.onload=function(){ count++; oDiv.style.width= Math.floor((count/total)*100) + '%'; oTxt.innerHTML = Math.floor((count/total)*100) + '%'; }; } }; </script> </head> <body> <div class=box> <div id=div1></div> <span id=txt></span> </div> </body>
在浏览器开始加载的时候进度条开始动，然后随机的加进度，一点点跑。如果老是没有加载完，那么这个进度条就会停在最后面一点点，直到浏览器加载完毕。
- 上一篇： javaweb的页面进度条
- 下一篇： 返回列表