类似Gmail和163邮箱删除邮件时在右上角显示的消息框-优快云博客

本文介绍了一个用于网页中自定义显示反馈消息的JavaScript函数。该函数允许开发者指定消息的内容、位置及显示时间，支持多种参数类型，包括百分比、像素值及预设位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示位置的定义和是否自动消失或多长时间渐隐消失。

代码如下：

/*
message:要显示的消息
x,y:显示消息框的坐标,默认为左上角
delay:延迟多长时间消失，-1为永不消失，单位为毫秒
*/
functionfeedBackMessage(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;
varfdDiv=document.getElementById('show_feedBack_message');
if(!fdDiv){
varshowMessage=document.createElement("<divid='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="";
vardocWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;
vardocHeight=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;

//渐隐效果
varstep=parseInt(delay/100);
varalpha=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);
}
}

函数语法：feedBackMessage(Message,X,Y,Delay)

参数介绍：
Message：必填参数。该参数为要显示的消息内容，可以为html内容
X：水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。
Y：垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。
Delay：显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1