demo地址:
思路如下:代码都有注释,,就不一一介绍了。
==>.progress{position: fixed;top: 0;right: 0;left: 0;height: 20px;background: #f5f5f5;border-bottom: 1px solid #ddd;}.progress-inner{width: 1%;background: #abcdef;position: absolute;top: 0;left: 0;bottom: 0;}===></div><script>($progress = document.getElementById(‘progress’);// 初始进度,1%var progress = 1;{return Math.floor(Math.random() * (max – min + 1) + min);};{// 随机时间var timeout = random(10, 30);setTimeout((window.loaded){$progress.style.width = ‘100%’;return;}// 随机进度progress += random(1, 5);// 随机进度不能超过 98%,以免页面还没加载完毕,进度已经 100% 了if(progress > 98){progress = 98;}$progress.style.width = progress + ‘%’;onprogress();}, timeout);};// 开始跑进度onprogress();window.onload = function(){window.loaded = true;};})();=>==>=></html>
害怕攀登高峰的人,永远在山下徘徊。