首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
三剑客：offset、client和scroll还傻傻分不清？
Dec 04 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
router(1) 区块链(2) 模拟登录(1) 双向链表(6) 扫雷(1) Date(1) 路由(1) NumPy(2) Scheduled(1) 单向链表(1)
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
php笔记之：php数组相关函数的使用
2013/04/26 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
理解python正则表达式
2016/01/15 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
keras打印loss对权重的导数方式
2020/06/10 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
世界上最大的街头服饰网站：Karmaloop
2017/02/04 全球购物
乌克兰鞋类购物网站：Eobuv.com.ua
2020/11/28 全球购物
请写出 BOOL flag 与＂零值＂比较的 if 语句
2016/02/29 面试题
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python