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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

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

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

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

     <script type="text/javascript">

         var etControl = {};

         etControl.process = function (config) {

             /*需要放在html中的body标签后面使用本控件*/

             var count = 0;

             var id = "loading";

             var el = "#" + id;

             $("body").append('<div id="' + id + '"></div>');

             var divTxt = "#" + id + " div";

             $(el).html("<div></div>");

             $(el).attr("style", "width: 100px;height: 12px;background: #A0DB0E;padding: 5px;position: fixed;left: 0;top: 0;font-size:12px;");

             $(divTxt).attr("style", "width: 1px;height: 12px;background: #F1FF4D;");

             /*更新进度条*/

             this.updateProcess = function (percent) {

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

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

                     setTimeout(function () {

                         $(el).hide(500);

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

                     }, count * 500 + 800);

                 }

             };

         }

     </script>

 </head>

 <body>

 </body>

 <script type="text/javascript">

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

     var p = new etControl.process();

     p.updateProcess(34);

     p.updateProcess(57);

     p.updateProcess(62);

     p.updateProcess(90);

     p.updateProcess(100);

 </script>

 </html>

复制过来就是方便自己查看而已

来自http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
如有版权问题，请联系我删除

js页面加载进度条的更多相关文章

  1. js页面加载进度条(这个就比较正式了，改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  2. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  3. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  4. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  5. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  6. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...

  7. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  8. JS网页加载进度条

    参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html

  9. 自己写的页面加载进度条jquery插件

    (function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...

随机推荐

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. Okhttp3日志采集功能

    原文地址以示尊重:http://www.jianshu.com/p/d836271b1ae4 日志采集是一个APP必备的功能,可以方便开发人员快速定位问题,解决问题,那么我们在使用okhttp的时候应 ...

  3. 整型（int）转时间格式字符串及页面long型转时间格式字符串

    1,如果是封装的整型的话需要在后台进行处理再返回页面 处理过程是这样的 SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm ...

  4. Detecting an Ajax request in PHP

    1:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. 面试题 43 n 个骰子的点数

    ; void printfProbability(int number) { ) return; ]; p[] = ]; p[] = ]; memset(p[], , )); memset(p[], ...

  6. MVC4.0系统开发新手历程（四）数据列表查询

    任何系统都不可避免的就是数据的查询展示,我觉得这里最值得一说的就是分部视图以及数据分页了 首先添加控制器 在控制其上面的名字为Index的Action上面右击,添加视图即可添加对应的视图,分部视图呈现 ...

  7. bzoj2929 [Poi1999]洞穴攀行

    Description 一队洞穴学者在Byte Mountain的Grate Cave里组织了一次训练.训练中,每一位洞穴学者要从最高的一个室到达最底下的一个室.他们只能向下走.一条路上每一个连续的室 ...

  8. 2014.6.14模拟赛【bzoj1592】[Usaco2008 Feb]Making the Grade 路面修整

    Description FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能同时出现在修好的路中. 整条路被分成了 ...

  9. SPOJ375.QTREE树链剖分

    题意:一个树,a b c 代表a--b边的权值为c.CHANGE x y  把输入的第x条边的权值改为y,QUERY x y 查询x--y路径上边的权值的最大值. 第一次写树链剖分,其实树链剖分只能说 ...

  10. 如何改变Myeclipse编辑区背景色

    编辑窗口右键单击——>Preferences——>General加号——>Editors加号——>点Text Editors字样——>右下窗口选Backgroud col ...