<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. MVC3缓存之一：使用页面缓存

    MVC3缓存之一:使用页面缓存 在MVC3中要如果要启用页面缓存,在页面对应的Action前面加上一个OutputCache属性即可. 我们建一个Demo来测试一下,在此Demo中,在View的Hom ...

  2. JSon 事件格式化

    JS~json日期格式化   起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,需要格式化时间 实现 function ChangeDateFormat(js ...

  3. MySQL忘记密码的解决方法

    1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant-tables回车. 4.原窗口已经不动了,再开一个DOS窗口,转到my ...

  4. [bzoj1854][SCOI2010]游戏

    Description 一个装备有两个属性,一个装备只能被使用一次,一次使用一种属性.攻击boss时需按属性1.属性2.属性3...属性k的顺序使用,问k最大为多少. Input 输入的第一行是一个整 ...

  5. VS2013编译python源码

    系统:win10 手头有个python模块,是用C写的,想编译安装就需要让python调用C编译器.直接编译发现使用的是vc9编译,不支持C99标准(两个槽点:为啥VS2008都还不支持C99?手头这 ...

  6. FIneCMS /dayrui/libraries/Chart/ofc_upload_image.php Arbitrary File Upload Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link: http://www.wooyun.org ...

  7. jackson处理boolean类型的注意点

    在使用jackson处理boolean类型的时候,比如你的java bean有一个boolean类型的字段:isTitle, 默认把这个Java bean 转换为json的时候,这个字段就变成了tit ...

  8. CF 213A Game（拓扑排序）

    传送门 Description Furik and Rubik love playing computer games. Furik has recently found a new game tha ...

  9. 重启电脑后，oracle数据库连接不上

    oracle10g安装成功后使用正常,重启电脑后,连接不上了,电脑-服务中各个服务都手动重启了,仍然无效 报错信息:ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 要手工去操作命 ...

  10. 【Alpha版本】 第六天 11.14

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成管理员的三大界面框架.完成管理主界面 完成我要招聘的招聘详情显 ...