JS实现定时页面弹出类似QQ新闻的提示框


Posted in Javascript onNovember 07, 2013

还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出)。当时上网找的这么一个资料,已经不记得原文出处了

<html> 
<head> 
<title>JavaScript提示框</title> <script type="text/javascript"> 
<!-- 
/** 
* 类名:CLASS_MSN_MESSAGE 
* 功能:提供类似MSN消息框 
* 示例: 
* var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈"); 
* MSG.show(); 
* 消息构造 
*/ 
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 = 150; 
this.speed = 20; 
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); 
} 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.lost63.com"); 
} 
/** 
* 消息显示方法 
*/ 
CLASS_MSN_MESSAGE.prototype.show = function(){ 
var oPopup = window.createPopup(); //IE5.5+ 
this.Pop = oPopup; 
var w = this.width; 
var h = this.height; 
// "×"关闭按钮 
/* 
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>" 
*/ 
// 按钮style 
// style='width:60px; height:20px; border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; FONT-SIZE: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; CURSOR: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;' 
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 += "</tr>" 
str += "<tr>" 
/*height:设置里面内容区域的高度 */ 
str += "<td style='padding-right: 1px;padding-bottom: 1px' colspan=3 height=" + (h-50) + ">" 
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='tencent://message/?uin=380522459&site=http://hi.baidu.com/lupeng0527&menu=yes' hidefocus=false id='ommand'><font color=#ff0000>有事您q我!</font></a></div>" 
str += "</div>" 
str += "</td>" 
str += "</tr>" 
str += "<tr align=center>" 
str += "<td colspan=3>" 
str += "<div style='padding: 2 0 2 0;'>" 
str += "<span id='buttonClose'><input type='button' title=关闭 value=确认 style='width:60px; height:20px; border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; FONT-SIZE: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; CURSOR: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;'></span>" 
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=true;} 
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 buttonClose = oPopup.document.getElementById("buttonClose"); 
buttonClose.onclick = function(){ 
me.close = true; 
me.hide(); 
} 
/* 
* "×"关闭事件 
* 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){} 
} 
var MSG1 = new CLASS_MSN_MESSAGE("aa",240,150,"管理员:","思路决定出路","迷失路上"); 
MSG1.rect(null,null,null,screen.height-50); 
MSG1.speed = 10; 
MSG1.step = 5; 
//alert(MSG1.top); 
//MSG1.show(); 
//同时两个有闪烁,只能用层代替了,不过层不跨框架 
/* 
var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊"); 
MSG2.rect(100,null,null,screen.height); 
MSG2.show(); 
*/ 
/** 
* 显示提示框 
*/ 
function showMSG(){ 
MSG1.show(); 
} 
</script> 
</head> 
<body> 
<center> 
<bgsound src="" id="bs" loop="no"> 
<input type="button" value="按钮" onclick="showMSG(); "> 
<br> 
<hr> 
</center> 
</body> 
</html>
Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
得到form下的所有的input的js代码
Nov 07 #Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 #Javascript
简单的Jquery全选功能
Nov 07 #Javascript
javascript去掉前后空格的实例
Nov 07 #Javascript
Javascript操作URL函数修改版
Nov 07 #Javascript
js字符串转成JSON
Nov 07 #Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 #Javascript
You might like
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php curl基本操作详解
2013/07/23 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
学习党代会心得体会
2014/09/05 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python