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

JS实现消息来时让网页标题闪动效果的方法

Posted in Javascript onApril 20, 2016

本文实例讲述了JS实现消息来时让网页标题闪动效果的方法。分享给大家供大家参考，具体如下：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script>
var g_blinkid = 0;
var g_blinkswitch = 0;
var g_blinktitle = document.title;
var g_onlineuser = "";
var g_sysmsg_sound = null;
var g_newmsg_sound = null;
var g_app_num = 0;
var g_appnum = 0;
var g_bappmore = false;
var g_inputtime = 0;
function blinkNewMsg()
{
 document.title = g_blinkswitch % 2==0 ? "【　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;
 g_blinkswitch++;
}
 g_blinkid = setInterval(blinkNewMsg, 1000);
function stopBlinkNewMsg()
{
  if (g_blinkid)
  {
    clearInterval(g_blinkid);
    g_blinkid = 0;
    document.title = g_blinktitle;
  }
}
</script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input id="Button1" type="button" value="button" onclick="stopBlinkNewMsg();" />
  </div>
  </form>
</body>
</html>

参考开心网的head-26.js

var g_blinkid = 0;
var g_blinkswitch = 0;
var g_blinktitle = document.title;
var g_onlineuser = "";
var g_sysmsg_sound = null;
var g_newmsg_sound = null;
var g_app_num = 0;
var g_appnum = 0;
var g_bappmore = false;
var g_inputtime = 0;
function blinkNewMsg()
{
  var now  = new Date();
  var nowtime = now.getTime();
  if(nowtime - g_inputtime > 5000)
  {
    document.title = g_blinkswitch % 2 ? "【　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;
  }
  g_blinkswitch++;
}
function blinkOnline()
{
  document.title = g_blinkswitch % 2 ? "○" + g_onlineuser + " 上线了 - " + g_blinktitle : "●" + g_onlineuser + " 上线了 - " + g_blinktitle;
  g_blinkswitch++;
  if (g_blinkswitch > 10)
  {
    stopBlinkNewMsg();
  }
}
function checkNewMsg()
{
  var url = "/home/newmsg.php";
  var pars = "";
  var myAjax = new Ajax.Request(url, {method: "post", parameters: pars, onComplete: function (req) { checkNewMsgShow(req); } });
}
function stopBlinkNewMsg()
{
  if (g_blinkid)
  {
    clearInterval(g_blinkid);
    g_blinkid = 0;
    $("head_msgdiv").style.display = "none";
    document.title = g_blinktitle;
  }
}
var g_oldmsg = g_oldsysmsg = g_oldbbs = g_oldbbsreply = g_oldcomment = g_oldreply = 0;
function checkNewMsgShow(req)
{
  var r = req.responseText;
  stopBlinkNewMsg();
  setTimeout(checkNewMsg, 60000);
  eval ("r="+r);
  var a_msglist = new Array("msg", "sysmsg", "bbs", "bbsreply", "comment", "reply");
  if(r.notice == "1")
  {
    var forbidsound = parseInt(r.forbidsound);
    if (!forbidsound)
    {
      for (i=0; i<a_msglist.length; i++)
      {
        if ($("body_" + a_msglist[i] + "_num"))
        {
          var c = parseInt($("body_" + a_msglist[i] + "_num").innerHTML);
          eval("g_old" + a_msglist[i] + "=c;");
        }
      }
      var newmsg = parseInt(r.msg) + parseInt(r.bbs) + parseInt(r.bbsreply) + parseInt(r.comment) + parseInt(r.reply);
      var sysmsg = parseInt(r.sysmsg);
      var newchange = (parseInt(r.msg) - g_oldmsg)
        || (parseInt(r.bbs) - g_oldbbs)
        || (parseInt(r.bbsreply) - g_oldbbsreply)
        || (parseInt(r.comment) - g_oldcomment)
        || (parseInt(r.reply) - g_oldreply);
      var syschange = (parseInt(r.sysmsg) - g_oldsysmsg);
      for (i=0; i<a_msglist.length; i++)
      {
        eval("g_old" + a_msglist[i] + "=parseInt(r." + a_msglist[i] + ");");
      }
      if (newmsg && newchange)
      {
        if (g_newmsg_sound == null)
        {
          g_newmsg_sound = new SWFObject("http://img.kaixin001.com.cn/i2/newmsg_sound.1.0.swf", "newmsg_sound_swf", "1", "1", "8", "#ffffff", true);
          g_newmsg_sound.addParam("allowscriptaccess", "always");
          g_newmsg_sound.addParam("wmode", "opaque");
          g_newmsg_sound.addParam("menu", "false");
          g_newmsg_sound.addVariable("autoplay","0");
        }
        g_newmsg_sound.write("head_msgsound_div");
      }
      else if (sysmsg && syschange)
      {
        if (g_sysmsg_sound == null)
        {
          g_sysmsg_sound = new SWFObject("http://img.kaixin001.com.cn/i2/sysmsg_sound.1.0.swf", "sysmsg_sound_swf", "1", "1", "8", "#ffffff", true);
          g_sysmsg_sound.addParam("allowscriptaccess", "always");
          g_sysmsg_sound.addParam("wmode", "opaque");
          g_sysmsg_sound.addParam("menu", "false");
          g_sysmsg_sound.addVariable("autoplay","0");
        }
        g_sysmsg_sound.write("head_msgsound_div");
      }
    }
    $("head_msgdiv").style.display = "block";
    g_blinkid = setInterval(blinkNewMsg, 1000);
  }
  else if (0 && r.online.length)
  {
    g_blinkswitch = 0;
    g_onlineuser = r.online;
    g_blinkid = setInterval(blinkOnline, 500);
  }
  for (i=0; i<a_msglist.length; i++)
  {
    if (!parseInt(r[a_msglist[i]]))
    {
      $("head_" + a_msglist[i] + "_num").innerHTML = "";
      if ($("body_" + a_msglist[i] + "_num"))
      {
        $("body_" + a_msglist[i] + "_num").className = "ql2";
        $("body_" + a_msglist[i] + "_num").innerHTML = "0条新";
      }
    }
    else
    {
      $("head_" + a_msglist[i] + "_num").innerHTML = "(" + r[a_msglist[i]] + ")";
      if ($("body_" + a_msglist[i] + "_num"))
      {
        $("body_" + a_msglist[i] + "_num").className = "cr";
        $("body_" + a_msglist[i] + "_num").innerHTML = r[a_msglist[i]] + "条新";
      }
      if (a_msglist[i] == "msg")
      {
        if ('function' == typeof(msg_view_checkNewMsg))
        {
          msg_view_checkNewMsg();
        };
      }
    }
  }
}
function outputHead()
{
  var v_html = 
'<div id="head">'
+'  <div class="hd">'
+'    <div class="h1 wl1" style="margin-top:3px;">'
+'      <div style="padding-left:18px;"><a href="/" class="cf" title="开心网"><img src="http://img.kaixin001.com.cn/i2/kaixinlogo.gif" alt="开心网" width="106" height="36" /></a></div>'
+'    </div>'
+'    <div class="h2">'
+'      <div id="hn1" class="hn_of">'
+'        <div class="hn_tt"><a href="/home/?t=' + Math.ceil(Math.random() * 100) + '" class="n">首页</a></div>'
+'        <div class="hn_sj"><a href="javascript:xs(1);" class="sj"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" width="15" height="20" /></a></div>'
+'        <div class="c"></div>'
+'        <div id="hn1_l" class="hn_l">'
+'          <div><a href="/home/" class="hnm">我的首页</a></div>'
+'          <div class="l1_h"> </div>'
+'          <div class="c9 m0_15">我的首页预览：</div>'
+'          <div>'
+'            <a href="/home/?_preview=friend" class="hnm" target=_blank onclick="javascript:hy();">'
+'            <div class="l" style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
+'            <div class="l" style="cursor:pointer;">好友访问时</div>'
+'            <div class="c"></div>'
+'            </a>'
+'          </div>'
+'          <div class="mb10">'
+'            <a href="/home/?_preview=other" class="hnm" target=_blank onclick="javascript:hy();" >'
+'            <div class="l" style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
+'            <div class="l" style="cursor:pointer;">陌生人访问时</div>'
+'            <div class="c"></div>'
+'            </a>'
+'          </div>'
+'        </div>'
+'      </div>'
+'      <div id="hn_xx1" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
+'      '
+'      <div id="hn2" class="hn_of">'
+'        <div class="hn_tt"><a href="/friend/?t=' + Math.ceil(Math.random() * 100) + '" class="n">好友</a></div>'
+'        <div class="hn_sj"><a href="javascript:xs(2);" class="sj"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" width="15" height="20" /></a></div>'
+'        <div class="c"></div>'
+'        <!--'
+'        <iframe style="position:absolute;z-index:1;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>'
+'        -->'
+'        <div id="hn2_l" class="hn_l" style="z-index:2">'
+'          <div><a href="/friend/" class="hnm">我的全部好友</a></div>'
+'          <div><a href="/friend/?viewtype=online" class="hnm">当前在线好友</a></div>'
+'          <div><a href="/friend/group.php" class="hnm">好友管理</a></div>'
+'          <div><a href="/home/fstatus.php" class="hnm">好友状态更新</a></div>'
+'          <div class="l1_h"> </div>'
+'          <div><a href="/friend/invite.php" class="hnm">邀请朋友加入</a></div>'
+'          <div><a href="/friend/search.php" class="hnm">查找朋友</a></div>'
+'        </div>'
+'      </div>'
+'      <div id="hn_xx2" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
+'    '
+'      <div id="hn3" class="hn_of">'
+'        <div class="hn_tt"><a href="/group/?t=' + Math.ceil(Math.random() * 100) + '" class="n">群</a></div>'
+'        <div class="hn_sj"><a href="javascript:xs(3);" class="sj"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" width="15" height="20" /></a></div>'
+'        <div class="c"></div>'
+'        <div id="hn3_l" class="hn_l">'
+'          <div><a href="/group/" class="hnm">我的群</a></div>'
+'          <div><a href="/group/flist.php" class="hnm">好友的群</a></div>'
+'          <div class="l1_h"> </div>'
+'          <div><a href="/group/new.php" class="hnm">创建新群</a></div>'
+'          <div><a href="/group/search.php" class="hnm">全部群</a></div>'
+'        </div>'
+'      </div>'
+'      <div id="hn_xx3" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
+'    '
+'      <div id="hn4" class="hn_of" style="padding-right:28px;">'
+'        <div class="hn_tt"><a href="/msg/?t=' + Math.ceil(Math.random() * 100) + '" class="n">消息</a></div>'
+'        <div class="hn_sj"><a href="javascript:xs(4);" class="sj"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" width="15" height="20" /></a><span style="position:absolute;top:5px; left:65px;display:none;" id=head_msgdiv><a href="/msg/" class="n" style="margin-top:-5px;"><img src="http://img.kaixin001.com.cn/i/ddtx.gif" onmouseover="javascript:xs(4);" border=0></a></span></div>'
+'        <div class="c"></div>'
+'        <div id="hn4_l" class="hn_l">'
+'          <div><a href="/msg/inbox.php?t=' + Math.ceil(Math.random() * 100) + '" class="hnm">短消息<span style="padding-left:2px;color:red;" id=head_msg_num></span></a></div>'
+'          <div><a href="/msg/sys.php?t=' + Math.ceil(Math.random() * 100) + '" class="hnm"">系统消息<span style="padding-left:2px;color:red;" id=head_sysmsg_num></span></a></div>'
+'          <div class="l1_h"> </div>'
+'          <div><a href="/comment/?t=' + Math.ceil(Math.random() * 100) + '" class="hnm">评论<span style="padding-left:2px;color:red;" id=head_comment_num></span></a></div>'
+'          <div><a href="/comment/send.php?t=' + Math.ceil(Math.random() * 100) + '" class="hnm">评论回复<span style="padding-left:2px;color:red;" id=head_reply_num></span></a></div>'
+'          <div><a href="/comment/uindex.php?t=' + Math.ceil(Math.random() * 100) + '" class="hnm">留言板<span style="padding-left:2px;color:red;" id=head_bbs_num></span></a></div>'
+'          <div><a href="/comment/usend.php?t=' + Math.ceil(Math.random() * 100) + '" class="hnm">留言回复<span style="padding-left:2px;color:red;" id=head_bbsreply_num></span></a></div>'
+'        </div>'
+'      </div>'
+'      <div id="hn_xx4" class="hn_xx"></div>'
+'      '
+'      <div class="c"></div>'
+'    </div>'
+'    <div class="h3"><a href="/friend/invite.php" class="ce">邀请</a> ┊ <a href="/friend/search.php" class="ce">找人</a> ┊ <a href="/set/account.php" class="ce">账户</a> ┊ <a href="/set/privacy.php" class="ce">隐私</a> ┊ <a href="/login/logout.php" class="ce">退出</a></div>'
+'    <div class="c"></div>'
+'  </div>'
+'</div>'
+'<div id="head_msgsound_div" style="left:0;top:0;position:absolute;"></div>'
+'<div id="main">'
+'  <div class="m1 wl1">'
+'    <div class="m1t"></div>'
+'    <div id="app_friend_tip" style="z-index:20000;position:absolute;background:#fff;border:2px solid #F7F7F7;width:160px;height:250px;display:none;">'
+'    </div>';
  document.writeln(v_html);
}
function _outputApp(v_icon, v_link, v_title, v_aid, v_index_num)
{
  if (-1 == v_link.indexOf("?"))
  {
    v_link += "?t=" + Math.ceil(Math.random() * 100);
  }
  else
  {
    v_link += "&t=" + Math.ceil(Math.random() * 100);
  }
  v_html = 
'<div style="margin:12px 15px 12px 15px;" onmouseover="javascript:if(\'' + v_index_num + '\'==\'1\'){$(\'app_friend_' + v_aid + '\').style.display=\'block\';}" onmouseout="javascript:$(\'app_friend_' + v_aid + '\').style.display=\'none\';">'
+'  <div class="l"><img src="' + v_icon + '" width="28" height="24" align="absmiddle" /> <a href="' + v_link + '" class="sl" title="' + v_title + '" ><b class="f14">' + v_title + '</b></a></div>'
+'  <div class="l" id="app_friend_' + v_aid + '" style="display:none;padding:8px 3px;cursor:pointer;" onclick="javascript:a_appfriend_show(' + v_aid + ' , \'' + v_link + '\' , \'' + v_title + '\');"><img src="http://img.kaixin001.com.cn/i2/xiasanjiao.gif" width="7" height="4" alt="快速查看你所有好友的' + v_title + '内容" align="absmiddle" /></div>'
+'  <div class="c"></div>'
+'</div>';
  return v_html;
}
function outputApp(v_icon, v_link, v_title, v_aid, v_index_num)
{
  document.writeln(_outputApp(v_icon, v_link, v_title, v_aid, v_index_num));
}
function _setApplistHiddenHead()
{
  if (g_app_num==-1) return '';
  g_appnum++;
  if (g_appnum>g_app_num && !g_bappmore)
  {
    g_bappmore = true;
    return '<span id=applistmore style="display:none">';
  }
  return '';
}
function setApplistHiddenHead()
{
  document.writeln(_setApplistHiddenHead());
}
function _setApplistHiddenTail()
{
  if (g_app_num==-1) return '';
  if (g_bappmore)
  {
    return '</span><div id=applistscroll class="tar" style="margin-top:-10px;"><img src="http://img.kaixin001.com.cn/i2/xiala.gif" width="5" align="absmiddle"> <a href="javascript:showAppmore();" class="sl-gray" style="text-decoration:none;" title="列出我的全部组件">展开</a>  </div>';
  }
  return '';
}
function setApplistHiddenTail()
{
  document.writeln(_setApplistHiddenTail());
}
function outputHead2()
{
  document.write('<div class="tac mb5"><img src="http://img.kaixin001.com.cn/i/index_app.gif" width="120" height="2" /></div> <div style="position:relative;"> <div class="install_tips" id="install_tips" style="position:absolute; left:110px; top:-7px; z-index:99; display:none;"> <div class="tar" style="padding:7px 15px 0 0;"><img src="http://img.kaixin001.com.cn/i2/black_del.gif" title="关闭" style="cursor:pointer;" onclick="h(\'install_tips\')" /></div> <p style="padding:0px 20px;">点击这里，添加各种实用或游戏组件</p></div> <div class="p5 m0_10 tac"><img src="http://img.kaixin001.com.cn/i/index_app_add1.gif" width="9" height="9" title="添加组件" /> <a href="/app/list.php" class="sl2">添加组件</a></div> </div> <div class="p5 m0_10 tac" style="margin-top:-8px;"><img src="http://img.kaixin001.com.cn/i/index_app_set1.gif" width="9" height="9" title="组件设置" /> <a href="/set/appman.php" class="sl2">组件设置</a></div></div>');
}
function showAppmore()
{
  if ($("applistmore").style.display=="none") 
  {
    $("applistmore").style.display="block";
    $("applistscroll").innerHTML = '<img src="http://img.kaixin001.com.cn/i2/shouqi.gif" width="5" align="absmiddle"> <a href="javascript:showAppmore();" class="sl-gray" style="text-decoration:none;">收起</a>  ';
  }
  else
  {
    $("applistmore").style.display="none";
    $("applistscroll").innerHTML = '<img src="http://img.kaixin001.com.cn/i2/xiala.gif" width="5" align="absmiddle"> <a href="javascript:showAppmore();" class="sl-gray" style="text-decoration:none;">展开</a>  ';
  }
}
function outputAppInfo()
{
  if (g_allapp_num > g_prevapp_num)
  {
    var url = "/app/left.php";
    var pars = "";
    var myAjax = new Ajax.Request(url, {method: "post", parameters: pars, onComplete: function (req) { outputAppInfoAjaxShow(req); } });
  }
}
function outputAppInfoAjaxShow(req)
{
  eval("data="+req.responseText);
  var v_html = '';
  for (var i=0; i<data.length; i++)
  {
    v_html += _setApplistHiddenHead();
    v_html += _outputApp(data[i]["icon"], data[i]["link"], data[i]["title"], data[i]["aid"], data[i]["index_num"]);
  }
  v_html += _setApplistHiddenTail();
  $("head_applist").innerHTML =v_html;
}
function outputTail()
{
  document.writeln('<div class="c"></div>'
+'</div>'
+'<div id="b">'
+'  <div class="b1"><a href="/s/about.html" class="c6" target="_blank">关于我们</a><span>┊</span><a href="/s/contact.html" class="c6" target="_blank">联系方式</a><span>┊</span><a href="/t/feedback.html" class="c6" target="_blank">意见反馈</a><span>┊</span><a href="/s/help.html" class="c6" target="_blank">帮助中心</a>　 © 2009 kaixin001.com  <a class=c6 href=http://www.miibeian.gov.cn target=_blank>京ICP证080482号</a> </div>'
+'</div>');
}

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现消息来时让网页标题闪动效果的方法

- Author -

且行且思

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

Javascript 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
PassWord输入框代码分享
Jun 07 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
JS敏感词过滤代码
Dec 23 Javascript
微信小程序自定义组件
Aug 16 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
FM(4) 短波(1) 电磁辐射(1) 电路图(1) 电台(1) LW(1) 调幅(1) 发报机(1) SWL(1) SW(1)
You might like
用Flash图形化数据(二)
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
详解Python中的文本处理
2015/04/11 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python Http请求json解析库用法解析
2020/11/28 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Dr. Martens马汀博士德国官网：马丁靴鼻祖
2019/12/26 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
运动会广播稿100字
2014/01/11 职场文书
精彩自我鉴定
2014/01/16 职场文书
学生会离职感言
2014/02/11 职场文书
航空学院求职信
2014/06/11 职场文书
爱心捐书活动总结
2014/07/05 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2014政府领导班子对照检查材料思想汇报（3篇）
2014/09/26 职场文书
出租车拒载检讨书
2015/01/28 职场文书
python中的被动信息搜集
2021/04/29 Python
改造DE1103三步曲
2022/04/07 无线电
python开发人人对战的五子棋小游戏
2022/05/02 Python