類似GMAIL的Ajax資訊反饋顯示

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:<!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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More