<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>

js加载条的更多相关文章

  1. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  2. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  3. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  4. JS 加载html 在IE7 IE8下 可调试

    实际背景 就是都是HTML 公共头部底部  然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...

  5. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  6. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  7. [f]动态判断js加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  8. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  9. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

随机推荐

  1. 【Python】python函数每日一讲 - dir()

    最近确实是有些忙,刚过了年,积攒了很多事情需要处理,所以每日一函数只能是每两天更新一篇,在这里和大家致歉. 今天我们来看一个非常重要的函数:dir() 中文说明:不带参数时,返回当前范围内的变量.方法 ...

  2. lintcode-51-上一个排列

    51-上一个排列 给定一个整数数组来表示排列,找出其上一个排列. 注意事项 排列中可能包含重复的整数 样例 给出排列[1,3,2,3],其上一个排列是[1,2,3,3] 给出排列[1,2,3,4],其 ...

  3. Docker实战系列一：初识Docker for Windows

    windows下安装Docker官网教程Install Docker for Windows Docker配置官网教程Get started with Docker for Windows

  4. Spark+Python+Pycharm在Windows下的配置

    http://blog.csdn.net/ydq1206/article/details/51922148

  5. poj 1753 Flip Game (dfs)

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28805   Accepted: 12461 Descr ...

  6. [AHOI2013]作业 & Gty的二逼妹子序列 莫队

    ---题面--- 题解: 题目要求统计一个区间内数值在[a, b]内的数的个数和种数,而这个是可以用树状数组统计出来的,所以可以考虑莫队. 考虑区间[l, r]转移到[l, r + 1],那么对于维护 ...

  7. BZOJ1934 [Shoi2007]Vote 善意的投票 【最小割】

    题目 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可以投和自己本来意愿 ...

  8. 【COGS 1873】 [国家集训队2011]happiness(吴确) 最小割

    这是一种最小割模型,就是对称三角,中间双向边,我们必须满足其最小割就是满足题目条件的互斥关系的最小舍弃,在这道题里面我们S表示文T表示理,中间一排点是每个人,每个人向两边连其选文或者选理的价值,中间每 ...

  9. BZOJ 4777 Usaco2017 Open Switch Grass Kruskal+替罪羊树+权值线段树

    这道题首先可以看出答案一定是一条边,而且答案一定在最小生成树上,那么我们就可以在这个最小生成树上维护他与异色儿子的边最小值,所以我们就可以已通过Kruskal和一棵平衡树来解决,时间复杂度是O(n*l ...

  10. Java的外部类为什么不能使用private、protected进行修饰

    对于顶级类(外部类)来说,只有两种修饰符:public和默认(default).因为外部类的上一单元是包,所以外部类只有两个作用域:同包,任何位置.因此,只需要两种控制权限:包控制权限和公开访问权限, ...