This article describes how JS implements the effect of making web page titles flash when messages come. Share it for your reference, as follows:
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>Unt title page</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 : "【New News】 - " + 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>Refer to Kaixin.com's 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 now = now.getTime(); if(nowtime - g_inputtime > 5000) { document.title = g_blinkswitch % 2 ? "【 】 - " + g_blinktitle : "【New News】 - " + g_blinktitle; } g_blinkswitch++;}function blinkOnline(){ document.title = g_blinkswitch % 2 ? "○" + g_onlineuser + " is online- " + g_blinktitle : "●" + g_onlineuser + " is online- " + 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", "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 new items"; } } 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]] + "new"; } 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 id="hn1">'+' <div><a href="/home/?t=' + Math.ceil(Math.random() * 100) + '">Home</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/">My home page</a></div>'+' <div><a href="/home/">My home page</a></div>'+' <div>My home page preview: </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;">When friends visit</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;">When a stranger visits</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) + '">Friends</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/">My friends</a></div>'+' <div><a href="/friend/?viewtype=online">Current online friends</a></div>'+' <div><a href="/friend/group.php">Friend management</a></div>'+' <div><a href="/home/fstatus.php">Friend status update</a></div>'+' <div><a href="/friend/invite.php">Invite friends to join</a></div>'+' <div><a href="/friend/search.php">Find friends</a></div>'+' </div>'+' <div><a href="/friend/search.php">Find friends</a></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) + '">Group</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/">My group</a></div>'+' <div><a href="/group/flist.php">Friends</a></div>'+' <div><a href="/group/new.php">Create a new group</a></div>'+' <div><a href="/group/search.php">All groups</a></div>'+' </div>'+' <div id="hn_xx3"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" /></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) + '">Message</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) + '">Short message<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) + '"">System message<span style="padding-left:2px;color:red;" id=head_sysmsg_num></span></a></div>'+' <div><a href="/comment/?t=' + Math.ceil(Math.random() * 100) + '">Comment<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) + '">Comment reply<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) + '">Message board<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) + '">Leave a message reply<span style="padding-left:2px;color:red;" id=head_bbsreply_num></span></a></div>'+' </div>'+' <div><a href="/friend/invite.php">Invite</a> ┊ <a href="/friend/search.php">Look for someone</a> ┊ <a href="/set/account.php">Account</a> ┊ <a href="/set/privacy.php">Privacy</a> ┊ <a href="/login/logout.php">Exit</a></div>'+' <div></div>'+' </div>'+' <div></div>'+' <div></div>'+' <div></div>'+' <div></div>'+' <div></div>'+' <div></div>'+' <div></div>'+' <div>'+' <div></div>'+' <div>'+' <div></div>'+' <div>'+' <div></div>'+' <div>'+' id="app_friend_tip" style="z-index:20000;position:absolute;background:#ffff;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;">Expand</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;">Click here to add various practical or game components</p></div> <div><img src="http://img.kaixin001.com.cn/i/index_app_add1.gif" /> <a href="/app/list.php">Add component</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">Component Settings</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;">Close</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;">Expand</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">About us</a><span>┊</span><a href="/s/contact.html" target="_blank">Contact information</a><span>┊</span><a href="/t/feedback.html" target="_blank">Feedback</a><span>┊</span><a href="/s/help.html" target="_blank">Help Center</a> © 2009 kaixin001.com <a class=c6 href=http://www.miibeian.gov.cn target=_blank>Beijing ICP Certificate No. 080482</a> </div>'+'</div>');}For more information about JavaScript related content, please check out the topics of this site: "Summary of ajax operation skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging skills", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques" and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.