首页
所有分类
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 相关文章推荐
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js使用ajax读博客rss示例
May 06 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
浅析Vue 生命周期
Jun 21 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
apply(1) pandas(7) 音频(1) 数据处理(2) Tkinter(4) Pool(1) agg(1) mp3Play(1) GUI(2) 矩阵(1)
You might like
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
深入理解JavaScript系列（44）：设计模式之桥接模式详解
2015/03/04 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python快速查找算法应用实例
2014/09/26 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python 实现dict转json并保存文件
2019/12/05 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Philosophy美国官网：美国美容品牌
2016/08/15 全球购物
Talbots官网：美国成熟女装品牌
2019/11/15 全球购物
俄罗斯购买自行车网站：Vamvelosiped
2021/01/29 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
怎样自定义一个异常类
2016/09/27 面试题
情侣吵架检讨书
2014/02/05 职场文书
行政助理工作职责范本
2014/03/04 职场文书
大学生创业计划书
2014/08/14 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android