<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>页面加载进度条</title>

    <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

       var loadProcess = function (config) {

          var count = 0;

          var id = config.id;

          var divTxt = "#"+id ;

          $("body").prepend('<div id="' + id + '" style="width: 0%; height:5px; background: green; "></div>' );

            /*更新进度条*/

            this.updateProcess = function (percent) {

                setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);

                if (percent == 100) {           /*100%就从页面移除loading标签*/

                    setTimeout(function () {

                        $(divTxt).hide(500);

                        setTimeout(function () { $(divTxt).remove() }, 500);

                    }, count * 500 + 800);

                }

            };

        }

    </script>

    <style>

    body{margin:0px;}

    </style>

</head>

<body>

<div style="border:1px solid red;width:100%; height:100px;"> content.......</div>

</body>

<script type="text/javascript">

    /*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/

    var p = new loadProcess({"id":"loading"});

    p.updateProcess(30);

    p.updateProcess(57);

    p.updateProcess(60);

    p.updateProcess(70);

    p.updateProcess(80);

    p.updateProcess(100);

</script>

</html>

JS网页顶部进度条demo的更多相关文章

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

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

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

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

  3. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

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

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

  5. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...

  6. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. Jquery实现可拖动进度条demo

    html <div class="progress"> <div class="progress_bg"> <div class= ...

  9. 网页载入进度条中的javascript

    demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> ...

随机推荐

  1. 【USACO 1.3】Wormholes

    /* LANG: C++ TASK: wormhole n个洞,n<=12, 如果两洞配对,则它们之间有地下路径(无向) 牛在地上只会往+x方向 问多少种两两配对的方案,牛从地上某位置出发,会陷 ...

  2. 【CodeForces 615E】Hexagons

    找规律. #include <cstdio> #include <iostream> #include <algorithm> #include <cstri ...

  3. AfNetworking 3.0源码解读

    做ios开发,AFNetworking 这个网络框架肯定都非常熟悉,也许我们平时只使用了它的部分功能,而且我们对它的实现原理并不是很清楚,就好像总是有一团迷雾在眼前一样. 接下来我们就非常详细的来读一 ...

  4. Hive 窗口函数、分析函数

    1 分析函数:用于等级.百分点.n分片等 Ntile 是Hive很强大的一个分析函数. 可以看成是:它把有序的数据集合 平均分配 到 指定的数量(num)个桶中, 将桶号分配给每一行.如果不能平均分配 ...

  5. [bzoj1984]月下“毛景树”

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园.毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的" ...

  6. 基于SURF特征的目标检测

    转战matlab了.步骤说一下: 目标图obj 含目标的场景图scene 载入图像 分别检测SURF特征点 分别提取SURF描述子,即特征向量 用两个特征相互匹配 利用匹配结果计算两者之间的trans ...

  7. MapReduce实现协同过滤中每个用户看过的项目集合

    一.知识准备 hadoop自带的例子在 D:\HADOOP_HOME\hadoop-2.6.4\share\hadoop\mapreduce\sources\hadoop-mapreduce-exam ...

  8. alertDialog创建登陆界面，判断用户输入

    alertDialog创建登陆界面,需要获取用户输入的用户名和密码,获取控件对象的时候不能像主布局文件那样获得, 需要在onClickListener中获取,代码如下: public boolean ...

  9. FZU みねちゃんの修罗场(从一堆出现三次的数中找出出现两次的数）

    みねちゃんの修罗场 Time Limit: 5000 mSec     Memory Limit: 1024 KB Description みねちゃん是个成绩优秀大学二年级学生,本来是和像自己妹妹一般 ...

  10. Javascript 与正则表达式

    一.正则表达式(regular expression简称res) 二.元字符及其在正则表达式上下文中的行为 三.正则表达式的常用方法 四.与正则表达式有关的字符串对象的方法 五.常用的正则表达式的操作 ...