首页
所有分类
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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
JS之小练习代码
Oct 12 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
js自定义瀑布流布局插件
May 16 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
得到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
SONY600GR(1) R9700(1) DE1103(2) DE1102(1) DE1105(1) 胆机(1) DE1107(3) WR-800F(1) R71E(1) ICOM(2)
You might like
php获取参数的几种方法总结
2014/02/18 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python读取Word（.docx）正文信息的方法
2018/03/15 Python
Python聊天室程序（基础版）
2018/04/01 Python
PyQT实现多窗口切换
2018/04/20 Python
对Python 语音识别框架详解
2018/12/24 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Roxy美国官网：澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
俄罗斯建筑和装饰材料在线商店：Stroilandia
2020/07/25 全球购物
Envie de Fraise意大利：法国网上推出的孕妇装品牌
2020/10/18 全球购物
医学生临床实习自我评价
2014/03/07 职场文书
社团活动总结范文
2014/04/26 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
创业计划书之养殖业
2019/10/11 职场文书