文件管理 · 2024年9月2日

网站顶部加载进度条|网页加载的进度条是什么原理用javascript做

㈠ 网页加载的进度条是什么原理用javascript做。

思路:进度条的总长度:进度条的当前长度 = 数据总长度:数据当前加载长度。

代码:

<style>*{margin:0px;padding:0px}.box{height:40px;width:500px;background:#ccc;border:1pxsolid#ccc;position:relative;margin:100pxauto;}.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(){varoDiv=document.getElementById('div1');varoTxt=document.getElementById('txt');varcount=0;vartotal=77;for(vari=0;i<77;i++){varoImg=newImage();oImg.src='http://www.nengshe.com/works/3525/img/'+i+'.jpg';oImg.onload=function(){count++;oDiv.style.width=Math.floor((count/total)*100)+'%';oTxt.innerHTML=Math.floor((count/total)*100)+'%';};}};</script></head><body><divclass="box"><divid="div1"></div><spanid="txt"></span></div></body>