网页加载进度条中的javascript

来源：互联网发布：淘宝天天九块九编辑：程序博客网时间：2024/06/08 18:43

demo地址：http://output.jsbin.com/buquyedosa

思路如下：代码都有注释，就不一一介绍了。

<!DOCTYPE html><html><head lang="zh-cn">    <meta charset="UTF-8">    <title>进度条</title><style>    .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;    }</style></head><body onprogress=""><div class="progress">    <div class="progress-inner" id="progress"></div></div><script>    (function () {        // 获取进度条 div        var $progress = document.getElementById('progress');        // 初始进度，1%        var progress = 1;        // 生成随机数        var random = function(min, max){            return Math.floor(Math.random() * (max - min + 1) + min);        };        // 跑进度        var onprogress = function () {            // 随机时间            var timeout = random(10, 30);            setTimeout(function () {                // 如果页面加载完毕，则直接进度到 100%                if(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;        };    })();</script><iframe src="http://baidu.com/" frameborder="0"></iframe><iframe src="http://163.com/" frameborder="0"></iframe><iframe src="http://qq.com/" frameborder="0"></iframe><iframe src="http://tencent.com/" frameborder="0"></iframe></body></html>

1 0