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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
js停止输出代码
Jul 20 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
VUE2.0中Jsonp的使用方法
May 22 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 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连接MongoDB示例代码
2012/09/06 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js 判断 enter 事件
2009/02/12 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python实现分段线性插值
2018/12/17 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
初一地理教学反思
2014/01/16 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python