<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. datatable绑定comboBox显示数据[C#]

    实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: 1.生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1 ...

  2. 使用HTML来生产Android界面

    使用HTML来生产Android界面 (2013-03-11 17:50:39) 转载▼   分类: Android 1. HTML 开发软件界面   因为android软件开发分工目前还没有细化,程 ...

  3. KM算法及其优化的学习笔记&&bzoj2539: [Ctsc2000]丘比特的烦恼

    感谢  http://www.cnblogs.com/vongang/archive/2012/04/28/2475731.html 这篇blog里提供了3个链接……基本上很明白地把KM算法是啥讲清楚 ...

  4. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  5. Linux内核版本类型

    对于Linux内核发布的版本类型有如下,也是自己的理解: [mainline]:主线版本,由Linux Torvalds维护和发布. [stable/EOL]:稳定版本,每个由主线发布的版本都叫做稳定 ...

  6. Jenkins配置MSBuild编译.net4.6的项目

    经过测试,如果用原始的msbuild,会出现语法无法识别的问题,"C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe&qu ...

  7. hdu 5269 trie树

    现场想到了lowbit(X xor Y)=X和Y从右向左数,对应相同的数的个数+1...然而并没有想到接下来用trie树 然后就想排个序试试...然后就整个人都不好了啊摔 sol:用trie,一边in ...

  8. Discuz! X upgrade/converter GETSHELL Vulnerability Via /convert/include/global.func.php Inject Special Symbol Into /convert/data/config.inc.php

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对于PHP应用来说,处于用户的输入并正确划定"数据-代码"边界 ...

  9. 《ODAY安全:软件漏洞分析技术》学习心得-----shellcode的一点小小的思考

    I will Make Impossible To I'm possible -----------LittleHann 看了2个多星期.终于把0DAY这本书给看完了,自己动手将书上的实验一个一个实现 ...

  10. win7、win8上SaveFileDialog窗口跳不出的问题

    xp上做的开一个线程 线程中数据以Excel形式保存到指定文件中的程序  放到win7 win8上都不跳出保存的对话框? 解决: 在win7.win8上都要对线程  在线程启动前设置其单元状态.设置为 ...