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

最新推荐文章于 2023-06-22 12:19:46 发布
最新推荐文章于 2023-06-22 12:19:46 发布
阅读量4.1k 收藏 4
点赞数 3
分类专栏： WEB其他 文章标签： QQ提示框 消息提示框 弹出消息 AJAX弹出消息
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caohaicheng/article/details/14439465
版权

还是在做联通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="按钮" οnclick="showMSG(); ">
   <br>
   <hr>
</center>
</body>
</html>


hai_cheng001
关注
专栏目录
js仿qq底部弹出广告窗
07-29
3个类似于qq底部弹窗广告的js代码 demo1.html 从底部缓缓出现一直悬停在底部，无关闭按钮 demo2.html 窗口直接出现，有关闭按钮 demo3.html 结合demo1和demo2的功能
仿QQ右下角弹窗新闻_源码分享
HUA的专栏
12-15 882
源码名称:仿QQ右下角弹窗新闻 源码作者:邓学彬(泪闯天涯) 开发环境:Visual Studio 2005  源码说明:Win32(SDK)开发,自绘实现,支持多种皮肤风格.无需其他界面库. 　　　　 美中不足之处是行距不能调整,GDI操作中,没发现现成的函数可以调整的,需要自己逐字计算才行了,所以这个就留给你们自己去完善了. [cpp]view plainco
超简单的JS模仿QQ弹窗效果
freeline_FLY的专栏
02-27 4042
QQ的弹窗效果在网页上用JS的一个moveBy方法就可以实现，moveBy的作用就是 将窗口的位置移动到指定的地方，moveBy(xx,yy)  xx和yy就是移动的偏移量 代码如下： for(var i=0;i<200;i++){ //向右 moveBy(0,30); //向下 moveBy(30,0); //向左 moveBy(-30,0); //向
前端javascript QQ右下角弹窗
xsyxsyxsyy的博客
12-18 168
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>腾讯首页弹窗</title> <style> body{
JS弹出新闻类窗口
feixia_24的专栏
06-01 546
JavaScript提示框 <!-- /** * 类名：CLASS_MSN_MESSAGE * 功能：提供类似MSN消息框 * 示例： * var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈"); * MSG.show(); * 消息构造 */ function CLASS_MS
JS实现定时页面弹出类似QQ新闻的提示框
10-26
为了实现类似QQ新闻的提示框，并且使其每隔半小时自动弹出一次，可以使用JavaScript来完成这一功能。 从提供的文件信息来看，实现这种提示框的关键在于以下几个知识点： 1. 创建页面提示框的方法。通过JavaScript...
页面右下角弹出消息提示框类似QQ或者MSN+ASP.NET
09-14
在ASP.NET开发中，创建一个类似QQ或MSN的页面右下角弹出消息提示框功能是一项常见的需求。这种提示框可以用于通知用户、显示警告信息或者进行交互式操作反馈。以下是一个详细的实现步骤和相关知识点： 1. **CSS布局...
纯js实现仿QQ邮箱弹出确认框
01-21
代码非常简单，这里就不多废话了。...QQ邮箱的弹出层</TITLE> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <style> body { background: none repeat scroll 0 0 #F
js实现仿qq消息的弹出窗效果
10-23
在本文中，我们将探讨如何使用JavaScript来实现一个仿QQ消息的弹出窗效果。这个功能在许多Web应用中都很常见，它可以用来展示通知、警告或简单的消息提示。下面，我们将详细解析实现这一效果的关键步骤。 首先，...
js 弹出QQ对话框 在线交谈
07-03
一个非常好用的QQ在线功能 一看即会~~！
JS封装的模仿qq右下角消息弹窗功能示例
10-18
主要介绍了JS封装的模仿qq右下角消息弹窗功能,涉及javascript事件响应、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
js特效从左飞到右 仿腾讯新闻页
08-27
战斗机、直升机满屏幕横飞，庆祝抗战胜利70周年，使用setinterval()和clearinterval()来实现
js封装好的模仿qq消息弹窗代码
weixin_33913377的博客
12-28 163
在我们的日常开发中，或者生活中。常常须要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。 直接贴代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html ...
qq消息弹窗java_js实现仿qq消息的弹出窗效果
weixin_36409144的博客
02-27 232
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗，分享给大家供大家参考，具体内容如下运行效果截图：直接贴代码：javaScript实现网页右下角弹出窗口代码var ShowMsg={title:'提示',content:'模拟qq弹出框消息提醒',width:'300px',height:'100px',setTitle:function(value...
js封装好的模仿qq消息弹窗代码(未测试)
程序员_007的博客
07-22 532
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。 直接贴代码： javaScript实现网页右下角弹出窗口代码 var ShowMsg={ title:'提示', content:'模
除了 P 站，程序员居然还喜欢上这些网站？快来摸鱼呀！
cxyITgc的博客
07-28 1960
二次元文化是越来越流行，程序员可以摸鱼的网站也是越来越多了呀
网络安全网站大全！都在这了！速看被删就没了
最新发布
qq_53058639的博客
06-22 1万+
我们学习网络安全，很多学习路线都有提到多逛论坛，阅读他人的技术分析帖，学习其挖洞思路和技巧。但是往往对于初学者来说，不知道去哪里寻找技术分析帖，也不知道网络安全有哪些相关论坛或网站，所以在这里给大家做一个网络安全的论坛网站分享。黑基网（WWW.HACKBASE.NET）成立于2003年，由IT精英和白帽黑客共同发起创立，致力于打造高端IT与网络安全的技术交流平台，网站拥有100万注册用户，在过去近20年的发展历程中，被赞誉为和。
.net实现扫描二维码登录webqq群抓取qq群信息
weixin_30896763的博客
09-18 535
一.流程 1.//获得二维码的qrsig，cookie标志 2.//登录二维码获得二维码的状态,及最新的url 3.//登录此网址，获得Cookies 4.//cookies，筛选出skey信息，获得post的参数 5. 提交POST 二. 代码 /// <summary> /// 获得QQ群返回的信息 /// </summa...
JS定时弹出QQ新闻提示框实例
本文档主要介绍了如何使用JavaScript实现一个定时页面弹出类似QQ新闻提示框的功能，这种提示框会在页面每隔半小时自动显示一次消息。实现这个效果的关键在于创建一个自定义的`CLASS_MSN_MESSAGE`类，该类包含了消息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值