javascript模拟实现ajax加载框实例


Posted in Javascript onOctober 15, 2014

本文实例讲述了javascript模拟实现ajax加载框的方法,分享给大家供大家参考。具体方法如下:

function loading(p_value,str)

{

if (p_value)

{ 

if (!document.getElementById("load_area"))

{

var para1 = document.createElement("span");

var node=document.createTextNode(str);

para1.appendChild(node);

var para=document.createElement("div");

para.id="load_area"; 

var top=document.body.scrollTop+document.documentElement.scrollTop;//获取页面中的实际高度

top_position = top+157 + "px";

para.style.top =top_position;

icon.style.cssText += ";vertical-align:middle;padding-right:4px;margin-top:-2px;"

para.style.cssText += 

";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;";
var icon = new Image();

icon.src="images/loading1.gif";//这里用实际路径替换

document.body.appendChild(para);
para.appendChild(icon);
para.appendChild(para1);
}

else

{

document.getElementById("load_area").style.display="block";

}

}

else

{ 

document.getElementById("load_area").style.display="none"; 

}

}

调用方法如下:

loading(true,"加载中...");  loading(false)

希望本文所述对大家的web前端程序设计有所帮助。

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 #Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
js实现select组件的选择输入过滤代码
Oct 14 #Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 #Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 #Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 #Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python中存取文件的4种不同操作
2018/07/02 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
大学生如何写自荐信
2014/01/08 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
法人身份证明书
2014/10/08 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书