<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. ThinkPHP 3.2 Token表单令牌

    /home/conf/config.php 中配置 'TOKEN_ON'=>true, 'TOKEN_NAME'=>'__hash__', 'TOKEN_TYPE'=>'md5', ...

  2. Cocoa pod的使用注意点

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...

  3. 63.Android面试题精选 (转)

    1.Android dvm 的进程和Linux的进程,应用程序的进程是否为同一个概念: 答:dvm是dalivk虚拟机.每一个android应用程序都在自己的进程中运行,都拥有一个dalivk虚拟机实 ...

  4. 53. Android常用工具类

    主要介绍总结的Android开发中常用的工具类,大部分同样适用于Java.目前包括HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils.Prefer ...

  5. 【caffe】create_cifar10.sh在windows下解决方案

    @tags caffe python windows下配置caffe后,create_cifar10.sh无法执行,因为是shell脚本.那就看懂脚本意思,用python重写一个: # create_ ...

  6. 当spring 容器初始化完成后执行某个方法

    在做web项目开发中,尤其是企业级应用开发的时候,往往会在工程启动的时候做许多的前置检查. 比如检查是否使用了我们组禁止使用的Mysql的group_concat函数,如果使用了项目就不能启动,并指出 ...

  7. wildfly 在 jee war 外部写配置文件

    有时需要写属性文件,保存配置值,当然也可以写在数据库.这里我们用文件方式. 最简单做法: 写在wildfly的配置目录里面: File confDir = new File(System.getPro ...

  8. jQuery知识点总结（第一天）

    整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...

  9. OpenGLES入门笔记三

    在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...

  10. BZOJ4445: [Scoi2015]小凸想跑步

    裸半平面交. 记得把P0P1表示的半平面加进去,否则点可能在多边形外. #include<bits/stdc++.h> #define N 100009 using namespace s ...