类似GMAIL的Ajax信息反馈显示

所属分类: 网络编程 / JavaScript 阅读数: 1845
收藏 0 赞 0 分享

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<META content="" name=author>
<META content="" name=keywords>
<META content="" name=description>
<STYLE type=text/css>#show_feedBack_message {
BORDER-RIGHT: #f00 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #f00 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: #fc0; PADDING-BOTTOM: 3px; BORDER-LEFT: #f00 1px solid; LINE-HEIGHT: 18px; PADDING-TOP: 3px; BORDER-BOTTOM: #f00 1px solid
}
{
FONT-SIZE: 12px
}
OL LI {
MARGIN: 15px 0px
}
OL LI A {
FONT-SIZE: 14px; COLOR: #00f
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT type=text/javascript>
<!--
/*
message:要显示的消息
x,y:显示消息框的坐标,默认为左上角
delay:延迟多长时间消失,-1为永不消失,单位为毫秒
*/
function feedBackMessage(message,x,y,delay){
if(!message) return;
//只允许百分数或数值参数
x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";
y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";
delay=parseInt(delay)||-1;
var fdDiv=document.getElementById('show_feedBack_message');
if(!fdDiv){
var showMessage=document.createElement("<div id='show_feedBack_message' style='z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap'></div>");
document.body.appendChild(showMessage);
fdDiv=document.getElementById('show_feedBack_message');
}

if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)}
fdDiv.innerHTML=message;
fdDiv.style.display="";
var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;
var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight;
if(/left|right/.test(x)){
x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px";
}
if(/top|bottom/.test(y)){
y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px";
}
fdDiv.style.left=x;
fdDiv.style.top=y;
fdDiv.filters.Alpha.Opacity=100;

//渐隐效果
var step=parseInt(delay/100);
var alpha=fdDiv.filters.Alpha.Opacity;
if(delay!=-1){
feedBackMessage.timer=setInterval(function(){
if(fdDiv.filters.Alpha.Opacity>0){
fdDiv.filters.Alpha.Opacity--
}else{
clearInterval(feedBackMessage.timer);
fdDiv.style.display="none"
}
},step);
}
}
//-->
</SCRIPT>

<DIV style="TEXT-ALIGN: center">
<DIV style="MARGIN: 15px auto; WIDTH: 96%; TEXT-ALIGN: left">
<OL>
<LI>(默认设置)显示位置:左上角 消失时间:不消失<BR><BR><A
onclick="feedBackMessage('消息提示测试1......');return false"
href="#">feedBackMessage('消息提示测试......')</A>

<LI>显示位置:left:200px,top:200px 消失时间:5秒后<BR><BR><A
onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false"
href="#">feedBackMessage('消息提示测试1......','200','200',5000)</A>

<LI>显示位置:页面右上部 消失时间:3秒后<BR><BR><A
onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false"
href="#">feedBackMessage('消息提示测试2......','right','top',3000)</A>

<LI>显示位置:left:50%,top:50% 消失时间:2秒后<BR><BR><A
onclick="feedBackMessage('消息提示测试3......','50%','50%',2000);return false"
href="#">feedBackMessage('消息提示测试3......','50%','50%',2000)</A>
<LI>显示位置:left:500px,top:200px 消失时间:不消失<BR><BR><A
onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false"
href="#">feedBackMessage('消息提示测试4......','500','200',-1)</A> </LI></OL></DIV>
<DIV
style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法:feedBackMessage(Message,X,Y,Delay)
<BR><BR><STRONG>参数介绍:</STRONG> <BR><U>Message:</U>必填参数。该参数为要显示的消息内容,可以为html内容
<BR><U>X:</U>水平方向的位置,可以是数值如50,250等,也可以是百分比如50%,或者是以下两个参数:left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。
<BR><U>Y:</U>垂直方向的位置,可以是数值,也可以是百分比,或者是以下两个参数:top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。
<BR><U>Delay:</U>显示时间,即多长时间后消失,单位为毫秒,如5000即5秒后消失,设定为-1则永不消失。默认为-1
</DIV></DIV>
</BODY>
</HTML>

在线演示 http://demo.jb51.net/js/gmail_info/demo.htm
更多精彩内容其他人还在看

js实现图片上传预览原理分析

这篇文章主要为大家详细介绍了js实现图片上传预览的原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Angular限制input框输入金额(是小数的话只保留两位小数点)

最近做项目遇到这样的需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码,需要的的朋友参考下吧
收藏 0 赞 0 分享

详解vue-cli + webpack 多页面实例配置优化方法

本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)

本篇文章主要介绍了React-Native解决键盘遮挡问题(Keyboard遮挡问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript反弹动画效果的实现代码

本文通过实例代码给大家介绍了js反弹动画效果的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享

解决vue2.x中数据渲染以及vuex缓存的问题

本篇文章主要介绍了vue2.x中请求之前数据显示以及vuex缓存的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jsonp跨域请求详解

这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

解决vue里碰到 $refs 的问题的方法

本篇文章主要介绍了解决vue里碰到 $refs 的问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js自定义弹框插件的封装

这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装,自己封装一个弹框插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue $refs的基本用法

本篇文章主要介绍了深入理解vue $refs的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多