JS implements the method of making the page title flash when the message comes
- 2021-02-17 06:07:47
- OfStack
This article illustrates how JS implements a message to make the title of a page flash. To share with you for your reference, as follows:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title> No 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 nowtime = 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 ? " a. " + g_onlineuser + " launched - " + g_blinktitle : " low " + g_onlineuser + " launched - " + 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 A new ";
}
}
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]] + " A new ";
}
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=" kaixin "><img src="http://img.kaixin001.com.cn/i2/kaixinlogo.gif" alt=" kaixin " 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"> Home page </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"> My home page </a></div>'
+' <div class="l1_h"> </div>'
+' <div class="c9 m0_15"> My Home Page Preview: </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;"> When friends visit </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;"> When a stranger visits </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"> buddies </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"> All my good friends </a></div>'
+' <div><a href="/friend/?viewtype=online" class="hnm"> Current online friends </a></div>'
+' <div><a href="/friend/group.php" class="hnm"> Friend Management </a></div>'
+' <div><a href="/home/fstatus.php" class="hnm"> Friend status updates </a></div>'
+' <div class="l1_h"> </div>'
+' <div><a href="/friend/invite.php" class="hnm"> Invite a Friend to Join </a></div>'
+' <div><a href="/friend/search.php" class="hnm"> Find a friend </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"> Group of </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"> My group </a></div>'
+' <div><a href="/group/flist.php" class="hnm"> Groups of Friends </a></div>'
+' <div class="l1_h"> </div>'
+' <div><a href="/group/new.php" class="hnm"> Create a new group of </a></div>'
+' <div><a href="/group/search.php" class="hnm"> All group </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"> The message </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"> A 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) + '" class="hnm""> System message <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"> comments <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"> Comment back <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"> 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) + '" class="hnm"> answering <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"> The invitation </a> ┊ <a href="/friend/search.php" class="ce"> Look for a person to </a> ┊ <a href="/set/account.php" class="ce"> account </a> ┊ <a href="/set/privacy.php" class="ce"> privacy </a> ┊ <a href="/login/logout.php" class="ce"> exit </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=" Quickly look at all your friends' profiles ' + v_title + ' content " 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=" List all my components "> an </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=" Shut down " style="cursor:pointer;" onclick="h(\'install_tips\')" /></div> <p style="padding:0px 20px;"> Click here to add a variety of utility or game components </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=" Add the component " /> <a href="/app/list.php" class="sl2"> Add the component </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=" Component set " /> <a href="/set/appman.php" class="sl2"> Component set </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;"> Pack up </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;"> an </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"> About us </a><span> ┊ </span><a href="/s/contact.html" class="c6" target="_blank"> contact </a><span> ┊ </span><a href="/t/feedback.html" class="c6" target="_blank"> feedback </a><span> ┊ </span><a href="/s/help.html" class="c6" target="_blank"> Help center </a> © 2009 kaixin001.com <a class=c6 href=http://www.miibeian.gov.cn target=_blank> Beijing ICP the 080482 No. </a> </div>'
+'</div>');
}
More about JavaScript related topics: interested readers to view this site in JavaScript ajax skills summary, JavaScript switching effects and skills summary, JavaScript lookup algorithm skills summary, JavaScript animation effects and skills summary, JavaScript error and debugging techniques, JavaScript data structure and algorithm skills summary, JavaScript times calendar calculation method and skills summary and "JavaScript mathematical operation usage summary"
I hope this article is helpful to JavaScript program design.