本文实例讲述了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>'+' <div style="margin-top:3px;">'+' <div style="padding-left:18px;"><a href="/"><img src="http://img.kaixin001.com.cn/i2/kaixinlogo.gif" /></a></div>'+' </div>'+' <div>'+' <div id="hn1">'+' <div><a href="/home/?t=' + Math.ceil(Math.random() * 100) + '">首页</a></div>'+' <div><a href="javascript:xs(1);"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" /></a></div>'+' <div></div>'+' <div id="hn1_l">'+' <div><a href="/home/">我的首页</a></div>'+' <div></div>'+' <div>我的首页预览：</div>'+' <div>'+' <a href="/home/?_preview=friend" target=_blank onclick="javascript:hy();">'+' <div style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" /></div>'+' <div style="cursor:pointer;">好友访问时</div>'+' <div></div>'+' </a>'+' </div>'+' <div>'+' <a href="/home/?_preview=other" target=_blank onclick="javascript:hy();" >'+' <div style="margin:5px 3px;"><img src="http://img.kaixin001.com.cn/i/small-tri.gif" /></div>'+' <div style="cursor:pointer;">陌生人访问时</div>'+' <div></div>'+' </a>'+' </div>'+' </div>'+' </div>'+' <div id="hn_xx1"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" /></div>'+' '+' <div id="hn2">'+' <div><a href="/friend/?t=' + Math.ceil(Math.random() * 100) + '">好友</a></div>'+' <div><a href="javascript:xs(2);"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" /></a></div>'+' <div></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" style="z-index:2">'+' <div><a href="/friend/">我的全部好友</a></div>'+' <div><a href="/friend/?viewtype=online">当前在线好友</a></div>'+' <div><a href="/friend/group.php">好友管理</a></div>'+' <div><a href="/home/fstatus.php">好友状态更新</a></div>'+' <div></div>'+' <div><a href="/friend/invite.php">邀请朋友加入</a></div>'+' <div><a href="/friend/search.php">查找朋友</a></div>'+' </div>'+' </div>'+' <div id="hn_xx2"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" /></div>'+' '+' <div id="hn3">'+' <div><a href="/group/?t=' + Math.ceil(Math.random() * 100) + '">群</a></div>'+' <div><a href="javascript:xs(3);"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" /></a></div>'+' <div></div>'+' <div id="hn3_l">'+' <div><a href="/group/">我的群</a></div>'+' <div><a href="/group/flist.php">好友的群</a></div>'+' <div></div>'+' <div><a href="/group/new.php">创建新群</a></div>'+' <div><a href="/group/search.php">全部群</a></div>'+' </div>'+' </div>'+' <div id="hn_xx3"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" /></div>'+' '+' <div id="hn4" style="padding-right:28px;">'+' <div><a href="/msg/?t=' + Math.ceil(Math.random() * 100) + '">消息</a></div>'+' <div><a href="javascript:xs(4);"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" /></a><span style="position:absolute;top:5px; left:65px;display:none;" id=head_msgdiv><a href="/msg/" style="margin-top:-5px;"><img src="http://img.kaixin001.com.cn/i/ddtx.gif" onmouseover="javascript:xs(4);" border=0></a></span></div>'+' <div></div>'+' <div id="hn4_l">'+' <div><a href="/msg/inbox.php?t=' + Math.ceil(Math.random() * 100) + '">短消息<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) + '"">系统消息<span style="padding-left:2px;color:red;" id=head_sysmsg_num></span></a></div>'+' <div></div>'+' <div><a href="/comment/?t=' + Math.ceil(Math.random() * 100) + '">评论<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) + '">评论回复<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) + '">留言板<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) + '">留言回复<span style="padding-left:2px;color:red;" id=head_bbsreply_num></span></a></div>'+' </div>'+' </div>'+' <div id="hn_xx4"></div>'+' '+' <div></div>'+' </div>'+' <div><a href="/friend/invite.php">邀请</a> ┊ <a href="/friend/search.php">找人</a> ┊ <a href="/set/account.php">账户</a> ┊ <a href="/set/privacy.php">隐私</a> ┊ <a href="/login/logout.php">退出</a></div>'+' <div></div>'+' </div>'+'</div>'+'<div id="head_msgsound_div" style="left:0;top:0;position:absolute;"></div>'+'<div id="main">'+' <div>'+' <div></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><img src="' + v_icon + '" align="absmiddle" /> <a href="' + v_link + '" ><b>' + v_title + '</b></a></div>'+' <div 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" align="absmiddle" /></div>'+' <div></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 style="margin-top:-10px;"><img src="http://img.kaixin001.com.cn/i2/xiala.gif" align="absmiddle"> <a href="javascript:showAppmore();" style="text-decoration:none;">展开</a></div>'; } return '';}function setApplistHiddenTail(){ document.writeln(_setApplistHiddenTail());}function outputHead2(){ document.write('<div><img src="http://img.kaixin001.com.cn/i/index_app.gif" /></div> <div style="position:relative;"> <div id="install_tips" style="position:absolute; left:110px; top:-7px; z-index:99; display:none;"> <div style="padding:7px 15px 0 0;"><img src="http://img.kaixin001.com.cn/i2/black_del.gif" style="cursor:pointer;" onclick="h(/'install_tips/')" /></div> <p style="padding:0px 20px;">点击这里，添加各种实用或游戏组件</p></div> <div><img src="http://img.kaixin001.com.cn/i/index_app_add1.gif" /> <a href="/app/list.php">添加组件</a></div> </div> <div style="margin-top:-8px;"><img src="http://img.kaixin001.com.cn/i/index_app_set1.gif" /> <a href="/set/appman.php">组件设置</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" align="absmiddle"> <a href="javascript:showAppmore();" style="text-decoration:none;">收起</a>'; } else { $("applistmore").style.display="none"; $("applistscroll").innerHTML = '<img src="http://img.kaixin001.com.cn/i2/xiala.gif" align="absmiddle"> <a href="javascript:showAppmore();" 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></div>'+'</div>'+'<div id="b">'+' <div><a href="/s/about.html" target="_blank">关于我们</a><span>┊</span><a href="/s/contact.html" target="_blank">联系方式</a><span>┊</span><a href="/t/feedback.html" target="_blank">意见反馈</a><span>┊</span><a href="/s/help.html" target="_blank">帮助中心</a> © 2009 kaixin001.com <a class=c6 href=http://www.miibeian.gov.cn target=_blank>京ICP证080482号</a> </div>'+'</div>');}更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。