`

模仿QQ消息提示功能的web实现

QQWebprototypeAjaxGoogle 
阅读更多
此文中的代码只是从做的一项目中扣出的，省略了AJAX与后台通信的的代码，代码如下：
<html>
<head>
<title>
一个消息测试例子！
</title>
</head>
<body onload="showalarm()">
模仿QQ消息提示功能的web实现。2008-09-17
</body>
</html>
<script language="javascript">
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action)
{    
this.id     = id;    
this.title  = title;    
this.caption= caption;    
this.message= message;    
this.target = target;    
this.action = action;    
this.width    = width?width:200;    
this.height = height?height:120;    
this.timeout= 500;    
this.speed    = 120;   
this.step    = 1;   
this.right    = screen.width -1;    
this.bottom = screen.height;   
this.left    = this.right - this.width;   
this.top    = this.bottom - this.height;   
this.timer    = 0;   
this.pause    = false;  
this.close    = false;  
this.autoHide    = true;  
}    

/**//*   
*    隐藏消息方法   
*/    
CLASS_MSN_MESSAGE.prototype.hide = function()
{    
if(this.onunload()){    
 
var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top;   
var me  = this;    
 
if(this.timer>0){     
window.clearInterval(me.timer);    
}    
 
var fun = function(){    
if(me.pause==false||me.close){  
var x  = me.left;   
var y  = 0;   
var width = me.width;   
var height = 0;   
if(me.offset>0){   
height = me.offset;   
}   

y  = me.bottom - height;   

if(y>=me.bottom){   
window.clearInterval(me.timer);    
me.Pop.hide();    
} else {   
me.offset = me.offset - me.step;    
}   
me.Pop.show(x,y,width,height);      
}               
}    
 
this.timer = window.setInterval(fun,this.speed)        
}    
}    

/**//*   
*    消息卸载事件，可以重写   
*/    
CLASS_MSN_MESSAGE.prototype.onunload = function()
{    
return true;    
}    
/**//*   
*    消息命令事件，要实现自己的连接，请重写它   
*   
*/    
CLASS_MSN_MESSAGE.prototype.oncommand = function()
{    
this.close = true;  
this.hide();    
window.open("http://www.baidu.com");  
 
}   
/**//*   
*    消息显示方法   
*/    
CLASS_MSN_MESSAGE.prototype.show = function()
{    
var oPopup = window.createPopup(); //IE5.5+     
this.Pop = oPopup;    
var w = this.width;    
var h = this.height;    
var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"    
str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"    
str += "<TR>"    
str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"    
str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"    
str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"    
str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"    
str += "</TR>"    
str += "<TR>"    
str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"    
str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"    
str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A> <A href='' hidefocus=false id='ommand'><FONT color=#ff0000> </FONT></A></DIV>"    
str += "</DIV>"    
str += "</TD>"    
str += "</TR>"    
str += "</TABLE>"    
str += "</DIV>"    

oPopup.document.body.innerHTML = str;   
this.offset  = 0;   
var me  = this;    
 
oPopup.document.body.onmouseover = function(){me.pause=true;}  
oPopup.document.body.onmouseout = function(){me.pause=false;}  
 
var fun = function(){    
var x  = me.left;   
var y  = 0;   
var width    = me.width;   
var height    = me.height;   
 
if(me.offset>me.height){   
height = me.height;   
} else {   
height = me.offset;   
}   
 
y  = me.bottom - me.offset;   
if(y<=me.top){   
me.timeout--;   
if(me.timeout==0){   
window.clearInterval(me.timer);    
if(me.autoHide){  
me.hide();   
}  
}   
} else {   
me.offset = me.offset + me.step;   
}   
me.Pop.show(x,y,width,height);      
 
}    

this.timer = window.setInterval(fun,this.speed)        
var btClose = oPopup.document.getElementById("btSysClose");    

btClose.onclick = function(){    
me.close = true;  
me.hide();    
}    

var btCommand = oPopup.document.getElementById("btCommand");    
btCommand.onclick = function(){    
me.oncommand();    
}      
  var ommand = oPopup.document.getElementById("ommand");    
  ommand.onclick = function(){    
   //this.close = true;  
me.hide();    
window.open(ommand.href);  
}     
}    
/**//*  
** 设置速度方法  
**/   
CLASS_MSN_MESSAGE.prototype.speed = function(s){   
var t = 20;   
try {   
t = praseInt(s);   
} catch(e){}   
this.speed = t;   
}   
/**//*  
** 设置步长方法  
**/   
CLASS_MSN_MESSAGE.prototype.step = function(s){   
var t = 1;   
try {   
t = praseInt(s);   
} catch(e){}   
this.step = t;   
}   

CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){   
try {   
this.left        = left    !=null?left:this.right-this.width;   
this.right        = right    !=null?right:this.left +this.width;   
this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;   
this.top        = top    !=null?top:this.bottom - this.height;   
} catch(e){}   
}


/************************************/

function showalarm()
{ var desc="我叫强强，我困！"+'<br>'+"我好饿！";
var name="mht";
var cmptime;
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
cmptime=hour.toString()+":"+minute.toString();
//////////////////
var header="您有1个新的<font color='red'>消息</font>来自 "+name+" "+cmptime;
var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"提示：",header,desc);    
MSG1.rect(null,null,null,screen.height-50);   
MSG1.speed    = 10;   
MSG1.step    = 5;       
MSG1.show();
}

</script>
分享到：
| Spring Security提高
评论
2 楼 mht19840918 2010-07-21  
SamuelFeng 写道
AJAX与后台通信的思路能不能讲下?

这个其实很简单，这个右下角的窗口的内容其实是我事先写死的，你实际用的时候肯定是先与后台通信，得到服务端的反馈后才显示在右下角的窗口的，ajax相关的资料google下
1 楼 SamuelFeng 2010-07-08  
AJAX与后台通信的思路能不能讲下?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式

    "模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式"是一个专注于实现这一功能的资源，它提供了多种实现此类通知的技术手段。下面将详细阐述这四种不同的实现方式以及它们在实际应用中的价值。 首先，右下角...

    JS模仿QQ提示消息声音

    ### JS模仿QQ提示消息声音 在网页开发领域中，利用JavaScript（简称JS）来实现音频播放功能是一项实用的技术。本文将详细介绍如何通过JS代码模仿QQ提示消息的声音，并探讨如何自定义播放其他声音的方法。 #### 一...

    DWR 实现QQ消息提示

    4. **消息框实现**：为了模仿QQ的消息提示框，可以使用HTML和CSS创建一个可定位在屏幕右下角的弹出框，然后利用JavaScript或者jQuery来控制它的显示和隐藏。消息内容可以作为参数传递给JavaScript函数，动态更新在...

    模仿qq聊天界面

    在IT行业中，模仿QQ聊天界面是一项常见的练习，旨在学习和掌握用户界面设计、前端开发以及多媒体处理技术。QQ作为一款广泛使用的即时通讯软件，其聊天界面具有丰富的功能和优秀的用户体验，是开发者学习的一个典范。...

    web 仿QQ聊天

    本项目“web 仿QQ聊天”旨在模仿QQ聊天的功能，提供一个在线对话平台，用户可以在这里进行实时沟通。下面将详细探讨这个项目所涵盖的关键知识点。 首先，前端开发是用户与应用交互的核心部分。在这个项目中，前端...

    flex仿qq右边弹出提示消息功能

    本项目“flex仿qq右边弹出提示消息功能”旨在模仿QQ聊天软件中的右下角弹出通知功能，为用户提供类似的新消息提醒体验。这种功能在现代Web应用中非常常见，用于展示系统更新、用户通知或重要消息。 首先，我们要...

    一个基于Web的QQ模仿

    【标题】"一个基于Web的QQ模仿"是一个项目，它旨在使用Web技术来实现类似QQ的功能，让用户体验在网页上进行即时通讯的乐趣。这个项目可能是由JavaScript开发人员创建的，利用了前端技术来构建一个与腾讯QQ类似的界面...

    asp留言板 模仿qq留言板 实现留言管理

    在本项目"asp留言板 模仿qq留言板 实现留言管理"中，我们将深入探讨如何利用ASP技术创建一个类似QQ留言板的功能，实现用户交互和后台管理。 首先，ASP的核心是VBScript（Visual Basic Script），它提供了丰富的内置...

    silverlight 类似web qq的聊天对话框及相关功能

    这表明我们将使用Silverlight开发一个具有聊天功能的用户界面，该界面设计应模仿Web QQ的外观和行为。Web QQ是一款基于网页的即时通讯应用，允许用户在不安装QQ客户端的情况下进行在线聊天。 1. **richtextbox**：...

    仿QQ即时弹出消息框

    在网页或应用中模仿QQ的消息提示框，可以借鉴其设计精髓，如圆润的边角、清晰的字体和合理的色彩搭配，以及恰当的动画效果，使得信息提示既美观又高效。 2. **浏览器右下角弹出**：将消息框设计在浏览器的右下角是...

    用JS模仿qq图片浏览

    在本文中，我们将深入探讨如何使用JavaScript（JS）来模仿QQ图片浏览的效果。这个效果包括了设置图片的间距，控制一次显示的图片数量，并在切换图片时，确保当前图片始终处于中间位置，以提供良好的用户体验。 首先...

    类似QQ,MSN,邮箱右下角消息提示，定时访问数据库。

    总结来说，这个项目的核心是构建一个具备即时消息通知功能的应用，其特点是模仿QQ、MSN和邮箱的提示方式，实现无刷新地从数据库获取新消息，并通过用户友好的界面向用户展示。开发者通过Visual Studio进行开发，利用...

    模仿QQ登录

    在本文中，我们将深入探讨如何模仿QQ登录的过程，这是一个典型的用户认证系统的设计和实现。QQ登录界面的仿制不仅涉及到前端界面的构建，还包括后端数据验证和安全性的考量。我们将从以下几个方面来阐述这个主题： ...

    多文件上传，模仿QQ邮箱

    在IT行业中，多文件上传是一项常见的...总之，学习并实现多文件上传功能是Web开发中的基础技能，而模仿QQ邮箱的上传体验则需要关注用户体验和安全性。通过实践和不断优化，开发者可以构建出高效、稳定的文件上传系统。

    WPF仿WEB QQ小时钟源码20130131

    【标题】"WPF仿WEB QQ小时钟源码20130131"是一个基于Windows Presentation Foundation（WPF）技术开发的项目，旨在模仿WEB QQ的小时钟设计。这个源码提供了一个桌面应用程序，它能够显示12个刻度，并在整点时将刻度...

    窗口抖动c#源码，模模仿QQ实现抖动

    本项目基于C#编程语言，旨在模仿QQ软件的窗口抖动效果，以达到类似的功能。C#是一种广泛应用于桌面应用开发、游戏开发、Web应用及服务器端程序的语言，具有丰富的类库和强大的.NET框架支持。 首先，要实现窗口抖动...

    QQ-login.zip_QQ模拟登录ios_ios 登录_page_qqlogin下载_模仿QQ

    9. **模仿QQ设计**： - 尽可能保持与QQ应用的视觉一致性，包括颜色方案、字体、图标等，以提供熟悉感。 - 使用AutoLayout和UIStackView等工具确保布局与原版一致。 10. **01-作业-QQ登陆界面**： - 这个文件可能...

    仿QQ消息弹出

    【标题】：“仿QQ消息弹出”是一种在软件或网页设计中常见的用户交互方式，它模仿了腾讯QQ即时通讯软件中的消息提示效果。这种设计旨在提供一种熟悉且友好的用户体验，让用户在使用其他应用程序时也能感受到类似QQ的...

    仿webQQ的web页面

    8. **API交互**：如果项目实现了部分功能，如登录、发送消息，那么可能涉及到了与腾讯QQ的Web API进行数据交互。 9. **版本控制**：开发过程中可能使用了Git进行版本控制，以便团队协作和代码管理。 通过以上分析...

    用Flex AIR 做一个类似QQ消息提示在系统托盘闪烁图标

    标题中的“用Flex AIR 做一个类似QQ消息提示在系统托盘闪烁图标”表明了这个项目是关于使用Adobe Flex和Adobe Integrated Runtime (AIR) 开发一个功能，该功能模仿了腾讯QQ的消息提示方式，即当有新消息时，系统托盘...

Magicbox
Global site tag (gtag.js) - Google Analytics