<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. 查看MySQL是否支持InnoDB引擎以及不支持的解决办法

    通过命令行进入mysql SHOW variables like "have_%"; 显示结果中会有如下3种可能的结果: have_innodb YES have_innodb N ...

  2. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  3. Pycharm设置

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...

  4. ActiveMQ跑起来

    转自:http://blog.163.com/chengwei_1104/blog/static/5364527420138231573547/?suggestedreading&wumii ...

  5. [bzoj4552][Tjoi2016][Heoi2016]排序

    Description 给出一个$1$到$n$的全排列,现在对这个全排列序列进行$m$次局部排序,排序分为$2$种: $1.(0,l,r)$表示将区间$[l,r]$的数字升序排序; $2.(1,l,r ...

  6. Leetcode Wiggle Sort II

    Given an unsorted array nums, reorder it such that nums[0] < nums[1] > nums[2] < nums[3]... ...

  7. BZOJ3142 [Hnoi2013]数列

    Description 小 T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察 到:除第一天外每天的股价都 ...

  8. centos安装163源

    cd /etc/yum.repos.d/ mv CentOS-Base.repo CentOS-Base.repo.cp wget http://mirrors.163.com/.help/CentO ...

  9. 通过oauth 认证 新浪微博 开发过程中遇到的问题

    1 Android之NetworkOnMainThreadException异常 http://blog.csdn.net/mad1989/article/details/25964495 ,从Hon ...

  10. Jquery 随便写些知识点

    针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...