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>

网页载入进度条中的javascript的更多相关文章

  1. HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  2. Unity发布WebGL时如何修改默认的载入进度条

    Unity发布WebGL版本后,需要去除Unity的Logo,首先关闭Splash Image去除Made with Unity启动画面(在File->Build Settings->Pl ...

  3. iOS-仿支付宝加载web网页添加进度条

    代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...

  4. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  5. ！！！！！安卓界面总是显示载入进度条的问题，没事别乱用ListFragment

    近期的安卓应用快完工了.可是个别界面有瑕疵,怎么改动都解决不了.挥之不去的阴影.问题例如以下: 在界面上,数据已经载入完成了.可还是有一股圆形的进度条,感觉它老是在载入什么东西,严重影响界面美观: 1 ...

  6. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 【CSS系列】网页头部进度条方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Unity3D中灵活绘制进度条

    有时我们需要在Unity3D中绘制进度条,如:           或        如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...

  9. ProgressBar.js – 漂亮的响应式 SVG 进度条

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...

随机推荐

  1. Matlab 从入门到精通 Chapter11 文件读取I/O

    11.1 工作空间数据读取 将工作空间的变量保存为文件,可以使用save命令.  save('filename') 将文件保存在当前目录下,文件名为filename.mat save('filenam ...

  2. 第三方库requests

    requests库 # 1.记得安装 第三方 模块 requests # pip install requests import requests url = 'http://www.baidu.co ...

  3. [洛谷P1892][codevs2597]团伙

    题目大意:有n个强盗,他们有这样的关系:1.朋友的朋友是朋友:2.敌人的敌人是朋友. 两个人是朋友,则他们在一个团伙中,是敌人则在不同团伙中. 现在给出一些朋友或敌人的关系,问最多有多少团伙.输入保证 ...

  4. centeros 7开机自动挂载磁盘

    场景: 使用mount命令将新发现的磁盘/dev/sdb挂载给/liu后,但是重启后又看不到磁盘? 问题导致原因: 虽然我们可以使用mount命令去挂载磁盘,但是此操作只对服务器运行期间有效,也就是临 ...

  5. mycat详细

    MyCAT的优势基于阿里开源的Cobar产品而研发,Cobar的稳定性.可靠性.优秀的架构和性能以及众多成熟的使用案例使得MYCAT一开始就拥有一个很好的起点,站在巨人的肩膀上,我们能看到更远.业界优 ...

  6. 紫书 例题8-14 UVa 1607 （二分）

    题意非常难理解-- #include<cstdio> #define REP(i, a, b) for(int i = (a); i < (b); i++) using namesp ...

  7. [NOI2002]贪吃的九头龙（树形dp）

    [NOI2002]贪吃的九头龙 题目背景 传说中的九头龙是一种特别贪吃的动物.虽然名字叫"九头龙",但这只是 说它出生的时候有九个头,而在成长的过程中,它有时会长出很多的新头,头的 ...

  8. WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配

    原文:WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 网上的 ...

  9. unity Android在streamingAssets路径下文件无法读取的的解决方法

    unity Android在streamingAssets路径下文件,有时候plugin下的.jar或者.so无法直接读取: 解决方法之一,拷贝至其他路径: #if UNITY_ANDROID str ...

  10. Atitit.运行cmd 命令行 php

    Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...