js 异步处理进度条

1.先上图，效果如下：

2.使用方法


代码如下:

var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50});
loader.Show();

3.代码列出：


代码如下:

/*
处理进度条，异步加载器
*/
var Ajaxloader=new Class();
Ajaxloader.prototype=
{
Text:'数据加载中......',
Parent:null,
Left:0,
Top:30,
Initialize:function(parentid,o)
{
//alert('Init');
Extend(this,o);
if(parentid)
{
this.Parent=$(parentid);
}
return this;
},
Show:function()
{
if(this.Parent)
{
var _obj = this.Create();
this.Parent.appendChild(_obj);
}
},
Create:function()
{
var _div=document.createElement('div');
var _img=document.createElement('img');
_img.src='<%=WebResource("DSKJ.Web.UI.WebControls.Images.ajaxloader.gif")%>';
_img.style.cssText='display:block;';
var _load=document.createElement('h3');
_load.innerText = this.Text;
_load.style.cssText='margin-top:5px;font-size:13px';
_div.appendChild(_img);
_div.appendChild(_load);
//设置div样式
_div.style.cssText='font-size:13px;text-align:center;margin:0 auto;display:block;z-Index:99';
_div.style.marginTop=this.Top;
return _div;
}
}

4.结束语
欢迎拍砖

赞 (0)

相关推荐

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • JS实现环形进度条（从0到100%）效果

    JS实现环形进度条（从0到100%）效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • js 蒙版进度条（结合图片）

    复制代码 代码如下: /******************** ** js 蒙版进度条(图片) ** dingzh@jstrd.com ** 2009-12-03 *********************/ //禁止网页后退 window.history.forward(1); document.attachEvent("onkeydown",docKeyDown); function docKeyDown() { //屏蔽退格删除键 if (window.event.keyCod

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • Extjs实现进度条的两种便捷方式

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候');弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait('提示','正在处理数据,请稍候'); 复制代码 代码如下: Ext.Ajax.request({ url:'DataAction.ashx?method=update', params:{It

  • js实现进度条的方法

    js实现进度条的方法

    本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f

  • js 异步处理进度条

    js 异步处理进度条

    1.先上图,效果如下: 2.使用方法 复制代码 代码如下: var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50}); loader.Show(); 3.代码列出: 复制代码 代码如下: /* 处理进度条,异步加载器 */ var Ajaxloader=new Class(); Ajaxloader.prototype= { Text:'数据加载中......', Parent:null, Left:0, T

  • PHP+AjaxForm异步带进度条上传文件实例代码

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交

  • PHP+Ajax异步带进度条上传文件实例

    PHP+Ajax异步带进度条上传文件实例

    最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行. 前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min

  • JS+WCF实现进度条实时监测数据加载量的方法详解

    本文实例讲述了JS+WCF实现进度条实时监测数据加载量的方法.分享给大家供大家参考,具体如下: 背景 由于项目中需要导入大量数据到memcache中 需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右) 同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右) 总之,完成这个数据导入一共需要1分30秒左右 这时候,需要一个进度条来实时监测完成的数据量 (之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着) 功

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • vue.js+ElementUI实现进度条提示密码强度效果

    要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z])  这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00

  • js实现简单进度条效果

    本文实例为大家分享了js实现简单进度条的具体代码,供大家参考,具体内容如下 实现进度条需要三个部分: 1.外部的大容器 2.在增长的进度条 3.显示进度条可视化的百分数 运用js控制进度条的width便可实现; 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

  • js实现滑动进度条效果

    本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下 进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} .progress-bar{position:relativ

  • JS实现圆形进度条拖拽滑动

    JS实现圆形进度条拖拽滑动

    本文实例为大家分享了JS实现圆形进度条拖拽滑动的具体代码,供大家参考,具体内容如下 效果展示 半圆进度条效果 圆形进度条 代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&q

随机推荐