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 相关文章推荐
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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文件大小格式化函数合集
2014/03/10 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
数学系毕业生求职信
2014/05/29 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
MySQL分库分表详情
2021/09/25 MySQL