当前位置：Gxlcms > JavaScript > JS实现消息来时让网页标题闪动效果的方法

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

时间：2021-07-01 10:21:17 帮助过：32人阅读

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

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head runat="server">
  3. <title>无标题页</title>
  4. <script>
  5. var g_blinkid = 0;
  6. var g_blinkswitch = 0;
  7. var g_blinktitle = document.title;
  8. var g_onlineuser = "";
  9. var g_sysmsg_sound = null;
  10. var g_newmsg_sound = null;
  11. var g_app_num = 0;
  12. var g_appnum = 0;
  13. var g_bappmore = false;
  14. var g_inputtime = 0;
  15. function blinkNewMsg()
  16. {
  17.  document.title = g_blinkswitch % 2==0 ? "【　　　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;
  18.  g_blinkswitch++;
  19. }
  20.  g_blinkid = setInterval(blinkNewMsg, 1000);
  21. function stopBlinkNewMsg()
  22. {
  23.   if (g_blinkid)
  24.   {
  25.     clearInterval(g_blinkid);
  26.     g_blinkid = 0;
  27.     document.title = g_blinktitle;
  28.   }
  29. }
  30. </script>
  31. </head>
  32. <body>
  33.   <form id="form1" runat="server">
  34.   <div>
  35.     <input id="Button1" type="button" value="button" onclick="stopBlinkNewMsg();" />
  36.   </div>
  37.   </form>
  38. </body>
  39. </html>

参考开心网的head-26.js

  1. var g_blinkid = 0;
  2. var g_blinkswitch = 0;
  3. var g_blinktitle = document.title;
  4. var g_onlineuser = "";
  5. var g_sysmsg_sound = null;
  6. var g_newmsg_sound = null;
  7. var g_app_num = 0;
  8. var g_appnum = 0;
  9. var g_bappmore = false;
  10. var g_inputtime = 0;
  11. function blinkNewMsg()
  12. {
  13.   var now  = new Date();
  14.   var nowtime = now.getTime();
  15.   if(nowtime - g_inputtime > 5000)
  16.   {
  17.     document.title = g_blinkswitch % 2 ? "【　　　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;
  18.   }
  19.   g_blinkswitch++;
  20. }
  21. function blinkOnline()
  22. {
  23.   document.title = g_blinkswitch % 2 ? "○" + g_onlineuser + " 上线了 - " + g_blinktitle : "●" + g_onlineuser + " 上线了 - " + g_blinktitle;
  24.   g_blinkswitch++;
  25.   if (g_blinkswitch > 10)
  26.   {
  27.     stopBlinkNewMsg();
  28.   }
  29. }
  30. function checkNewMsg()
  31. {
  32.   var url = "/home/newmsg.php";
  33.   var pars = "";
  34.   var myAjax = new Ajax.Request(url, {method: "post", parameters: pars, onComplete: function (req) { checkNewMsgShow(req); } });
  35. }
  36. function stopBlinkNewMsg()
  37. {
  38.   if (g_blinkid)
  39.   {
  40.     clearInterval(g_blinkid);
  41.     g_blinkid = 0;
  42.     $("head_msgdiv").style.display = "none";
  43.     document.title = g_blinktitle;
  44.   }
  45. }
  46. var g_oldmsg = g_oldsysmsg = g_oldbbs = g_oldbbsreply = g_oldcomment = g_oldreply = 0;
  47. function checkNewMsgShow(req)
  48. {
  49.   var r = req.responseText;
  50.   stopBlinkNewMsg();
  51.   setTimeout(checkNewMsg, 60000);
  52.   eval ("r="+r);
  53.   var a_msglist = new Array("msg", "sysmsg", "bbs", "bbsreply", "comment", "reply");
  54.   if(r.notice == "1")
  55.   {
  56.     var forbidsound = parseInt(r.forbidsound);
  57.     if (!forbidsound)
  58.     {
  59.       for (i=0; i<a_msglist.length; i++)
  60.       {
  61.         if ($("body_" + a_msglist[i] + "_num"))
  62.         {
  63.           var c = parseInt($("body_" + a_msglist[i] + "_num").innerHTML);
  64.           eval("g_old" + a_msglist[i] + "=c;");
  65.         }
  66.       }
  67.       var newmsg = parseInt(r.msg) + parseInt(r.bbs) + parseInt(r.bbsreply) + parseInt(r.comment) + parseInt(r.reply);
  68.       var sysmsg = parseInt(r.sysmsg);
  69.       var newchange = (parseInt(r.msg) - g_oldmsg)
  70.         || (parseInt(r.bbs) - g_oldbbs)
  71.         || (parseInt(r.bbsreply) - g_oldbbsreply)
  72.         || (parseInt(r.comment) - g_oldcomment)
  73.         || (parseInt(r.reply) - g_oldreply);
  74.       var syschange = (parseInt(r.sysmsg) - g_oldsysmsg);
  75.       for (i=0; i<a_msglist.length; i++)
  76.       {
  77.         eval("g_old" + a_msglist[i] + "=parseInt(r." + a_msglist[i] + ");");
  78.       }
  79.       if (newmsg && newchange)
  80.       {
  81.         if (g_newmsg_sound == null)
  82.         {
  83.           g_newmsg_sound = new SWFObject("http://img.kaixin001.com.cn/i2/newmsg_sound.1.0.swf", "newmsg_sound_swf", "1", "1", "8", "#ffffff", true);
  84.           g_newmsg_sound.addParam("allowscriptaccess", "always");
  85.           g_newmsg_sound.addParam("wmode", "opaque");
  86.           g_newmsg_sound.addParam("menu", "false");
  87.           g_newmsg_sound.addVariable("autoplay","0");
  88.         }
  89.         g_newmsg_sound.write("head_msgsound_div");
  90.       }
  91.       else if (sysmsg && syschange)
  92.       {
  93.         if (g_sysmsg_sound == null)
  94.         {
  95.           g_sysmsg_sound = new SWFObject("http://img.kaixin001.com.cn/i2/sysmsg_sound.1.0.swf", "sysmsg_sound_swf", "1", "1", "8", "#ffffff", true);
  96.           g_sysmsg_sound.addParam("allowscriptaccess", "always");
  97.           g_sysmsg_sound.addParam("wmode", "opaque");
  98.           g_sysmsg_sound.addParam("menu", "false");
  99.           g_sysmsg_sound.addVariable("autoplay","0");
  100.         }
  101.         g_sysmsg_sound.write("head_msgsound_div");
  102.       }
  103.     }
  104.     $("head_msgdiv").style.display = "block";
  105.     g_blinkid = setInterval(blinkNewMsg, 1000);
  106.   }
  107.   else if (0 && r.online.length)
  108.   {
  109.     g_blinkswitch = 0;
  110.     g_onlineuser = r.online;
  111.     g_blinkid = setInterval(blinkOnline, 500);
  112.   }
  113.   for (i=0; i<a_msglist.length; i++)
  114.   {
  115.     if (!parseInt(r[a_msglist[i]]))
  116.     {
  117.       $("head_" + a_msglist[i] + "_num").innerHTML = "";
  118.       if ($("body_" + a_msglist[i] + "_num"))
  119.       {
  120.         $("body_" + a_msglist[i] + "_num").className = "ql2";
  121.         $("body_" + a_msglist[i] + "_num").innerHTML = "0条新";
  122.       }
  123.     }
  124.     else
  125.     {
  126.       $("head_" + a_msglist[i] + "_num").innerHTML = "(" + r[a_msglist[i]] + ")";
  127.       if ($("body_" + a_msglist[i] + "_num"))
  128.       {
  129.         $("body_" + a_msglist[i] + "_num").className = "cr";
  130.         $("body_" + a_msglist[i] + "_num").innerHTML = r[a_msglist[i]] + "条新";
  131.       }
  132.       if (a_msglist[i] == "msg")
  133.       {
  134.         if ('function' == typeof(msg_view_checkNewMsg))
  135.         {
  136.           msg_view_checkNewMsg();
  137.         };
  138.       }
  139.     }
  140.   }
  141. }
  142. function outputHead()
  143. {
  144.   var v_html = 
  145. '<div id="head">'
  146. +'  <div class="hd">'
  147. +'    <div class="h1 wl1" style="margin-top:3px;">'
  148. +'      <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>'
  149. +'    </div>'
  150. +'    <div class="h2">'
  151. +'      <div id="hn1" class="hn_of">'
  152. +'        <div class="hn_tt"><a href="/home/?t=' + Math.ceil(Math.random() * 100) + '" class="n">首页</a></div>'
  153. +'        <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>'
  154. +'        <div class="c"></div>'
  155. +'        <div id="hn1_l" class="hn_l">'
  156. +'          <div><a href="/home/" class="hnm">我的首页</a></div>'
  157. +'          <div class="l1_h"> </div>'
  158. +'          <div class="c9 m0_15">我的首页预览：</div>'
  159. +'          <div>'
  160. +'            <a href="/home/?_preview=friend" class="hnm" target=_blank onclick="javascript:hy();">'
  161. +'            <div class="l" style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
  162. +'            <div class="l" style="cursor:pointer;">好友访问时</div>'
  163. +'            <div class="c"></div>'
  164. +'            </a>'
  165. +'          </div>'
  166. +'          <div class="mb10">'
  167. +'            <a href="/home/?_preview=other" class="hnm" target=_blank onclick="javascript:hy();" >'
  168. +'            <div class="l" style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
  169. +'            <div class="l" style="cursor:pointer;">陌生人访问时</div>'
  170. +'            <div class="c"></div>'
  171. +'            </a>'
  172. +'          </div>'
  173. +'        </div>'
  174. +'      </div>'
  175. +'      <div id="hn_xx1" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
  176. +'      '
  177. +'      <div id="hn2" class="hn_of">'
  178. +'        <div class="hn_tt"><a href="/friend/?t=' + Math.ceil(Math.random() * 100) + '" class="n">好友</a></div>'
  179. +'        <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>'
  180. +'        <div class="c"></div>'
  181. +'        <!--'
  182. +'        <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>'
  183. +'        -->'
  184. +'        <div id="hn2_l" class="hn_l" style="z-index:2">'
  185. +'          <div><a href="/friend/" class="hnm">我的全部好友</a></div>'
  186. +'          <div><a href="/friend/?viewtype=online" class="hnm">当前在线好友</a></div>'
  187. +'          <div><a href="/friend/group.php" class="hnm">好友管理</a></div>'
  188. +'          <div><a href="/home/fstatus.php" class="hnm">好友状态更新</a></div>'
  189. +'          <div class="l1_h"> </div>'
  190. +'          <div><a href="/friend/invite.php" class="hnm">邀请朋友加入</a></div>'
  191. +'          <div><a href="/friend/search.php" class="hnm">查找朋友</a></div>'
  192. +'        </div>'
  193. +'      </div>'
  194. +'      <div id="hn_xx2" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
  195. +'    '
  196. +'      <div id="hn3" class="hn_of">'
  197. +'        <div class="hn_tt"><a href="/group/?t=' + Math.ceil(Math.random() * 100) + '" class="n">群</a></div>'
  198. +'        <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>'
  199. +'        <div class="c"></div>'
  200. +'        <div id="hn3_l" class="hn_l">'
  201. +'          <div><a href="/group/" class="hnm">我的群</a></div>'
  202. +'          <div><a href="/group/flist.php" class="hnm">好友的群</a></div>'
  203. +'          <div class="l1_h"> </div>'
  204. +'          <div><a href="/group/new.php" class="hnm">创建新群</a></div>'
  205. +'          <div><a href="/group/search.php" class="hnm">全部群</a></div>'
  206. +'        </div>'
  207. +'      </div>'
  208. +'      <div id="hn_xx3" class="hn_xx"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></div>'
  209. +'    '
  210. +'      <div id="hn4" class="hn_of" style="padding-right:28px;">'
  211. +'        <div class="hn_tt"><a href="/msg/?t=' + Math.ceil(Math.random() * 100) + '" class="n">消息</a></div>'
  212. +'        <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>'
  213. +'        <div class="c"></div>'
  214. +'        <div id="hn4_l" class="hn_l">'
  215. +'          <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>'
  216. +'          <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>'
  217. +'          <div class="l1_h"> </div>'
  218. +'          <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>'
  219. +'          <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>'
  220. +'          <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>'
  221. +'          <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>'
  222. +'        </div>'
  223. +'      </div>'
  224. +'      <div id="hn_xx4" class="hn_xx"></div>'
  225. +'      '
  226. +'      <div class="c"></div>'
  227. +'    </div>'
  228. +'    <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>'
  229. +'    <div class="c"></div>'
  230. +'  </div>'
  231. +'</div>'
  232. +'<div id="head_msgsound_div" style="left:0;top:0;position:absolute;"></div>'
  233. +'<div id="main">'
  234. +'  <div class="m1 wl1">'
  235. +'    <div class="m1t"></div>'
  236. +'    <div id="app_friend_tip" style="z-index:20000;position:absolute;background:#fff;border:2px solid #F7F7F7;width:160px;height:250px;display:none;">'
  237. +'    </div>';
  238.   document.writeln(v_html);
  239. }
  240. function _outputApp(v_icon, v_link, v_title, v_aid, v_index_num)
  241. {
  242.   if (-1 == v_link.indexOf("?"))
  243.   {
  244.     v_link += "?t=" + Math.ceil(Math.random() * 100);
  245.   }
  246.   else
  247.   {
  248.     v_link += "&t=" + Math.ceil(Math.random() * 100);
  249.   }
  250.   v_html = 
  251. '<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\';">'
  252. +'  <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>'
  253. +'  <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>'
  254. +'  <div class="c"></div>'
  255. +'</div>';
  256.   return v_html;
  257. }
  258. function outputApp(v_icon, v_link, v_title, v_aid, v_index_num)
  259. {
  260.   document.writeln(_outputApp(v_icon, v_link, v_title, v_aid, v_index_num));
  261. }
  262. function _setApplistHiddenHead()
  263. {
  264.   if (g_app_num==-1) return '';
  265.   g_appnum++;
  266.   if (g_appnum>g_app_num && !g_bappmore)
  267.   {
  268.     g_bappmore = true;
  269.     return '<span id=applistmore style="display:none">';
  270.   }
  271.   return '';
  272. }
  273. function setApplistHiddenHead()
  274. {
  275.   document.writeln(_setApplistHiddenHead());
  276. }
  277. function _setApplistHiddenTail()
  278. {
  279.   if (g_app_num==-1) return '';
  280.   if (g_bappmore)
  281.   {
  282.     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>';
  283.   }
  284.   return '';
  285. }
  286. function setApplistHiddenTail()
  287. {
  288.   document.writeln(_setApplistHiddenTail());
  289. }
  290. function outputHead2()
  291. {
  292.   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>');
  293. }
  294. function showAppmore()
  295. {
  296.   if ($("applistmore").style.display=="none") 
  297.   {
  298.     $("applistmore").style.display="block";
  299.     $("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>  ';
  300.   }
  301.   else
  302.   {
  303.     $("applistmore").style.display="none";
  304.     $("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>  ';
  305.   }
  306. }
  307. function outputAppInfo()
  308. {
  309.   if (g_allapp_num > g_prevapp_num)
  310.   {
  311.     var url = "/app/left.php";
  312.     var pars = "";
  313.     var myAjax = new Ajax.Request(url, {method: "post", parameters: pars, onComplete: function (req) { outputAppInfoAjaxShow(req); } });
  314.   }
  315. }
  316. function outputAppInfoAjaxShow(req)
  317. {
  318.   eval("data="+req.responseText);
  319.   var v_html = '';
  320.   for (var i=0; i<data.length; i++)
  321.   {
  322.     v_html += _setApplistHiddenHead();
  323.     v_html += _outputApp(data[i]["icon"], data[i]["link"], data[i]["title"], data[i]["aid"], data[i]["index_num"]);
  324.   }
  325.   v_html += _setApplistHiddenTail();
  326.   $("head_applist").innerHTML =v_html;
  327. }
  328. function outputTail()
  329. {
  330.   document.writeln('<div class="c"></div>'
  331. +'</div>'
  332. +'<div id="b">'
  333. +'  <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>'
  334. +'</div>');
  335. }

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！