這篇文章主要介紹了JS實(shí)現(xiàn)消息來(lái)時(shí)讓網(wǎng)頁(yè)標(biāo)題閃動(dòng)效果的方法,實(shí)例分析了JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的技巧,并附帶了開(kāi)心網(wǎng)的標(biāo)題閃動(dòng)解決方案,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)消息來(lái)時(shí)讓網(wǎng)頁(yè)標(biāo)題閃動(dòng)效果的方法。分享給大家供大家參考，具體如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無(wú)標(biāo)題頁(yè)</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>
參考開(kāi)心網(wǎng)的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>'
+' <div><a href="/"><img src="http://img.kaixin001.com.cn/i2/kaixinlogo.gif" width="106" height="36" /></a></div>'
+' </div>'
+' <div>'
+' <div id="hn1">'
+' <div><a href="/home/?t=' + Math.ceil(Math.random() * 100) + '">首頁(yè)</a></div>'
+' <div><a href="javascript:xs(1);"><img src="http://img.kaixin001.com.cn/i/r_sj.gif" width="15" height="20" /></a></div>'
+' <div></div>'
+' <div id="hn1_l">'
+' <div><a href="/home/">我的首頁(yè)</a></div>'
+' <div> </div>'
+' <div>我的首頁(yè)預(yù)覽：</div>'
+' <div>'
+' <a href="/home/?_preview=friend" target=_blank onclick="javascript:hy();">'
+' <div><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
+' <div>好友訪問(wèn)時(shí)</div>'
+' <div></div>'
+' </a>'
+' </div>'
+' <div>'
+' <a href="/home/?_preview=other" target=_blank onclick="javascript:hy();" >'
+' <div><img src="http://img.kaixin001.com.cn/i/small-tri.gif" width="3" height="5" /></div>'
+' <div>陌生人訪問(wèn)時(shí)</div>'
+' <div></div>'
+' </a>'
+' </div>'
+' </div>'
+' </div>'
+' <div id="hn_xx1"><img src="http://img.kaixin001.com.cn/i/r_xx13.gif" width="1" height="13" /></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" width="15" height="20" /></a></div>'
+' <div></div>'
+' <!--'
+' <iframe frameborder="0" ></iframe>'
+' -->'
+' <div id="hn2_l">'
+' <div><a href="/friend/">我的全部好友</a></div>'
+' <div><a href="/friend/?viewtype=online">當(dāng)前在線好友</a></div>'
+' <div><a href="/friend/group.php">好友管理</a></div>'
+' <div><a href="/home/fstatus.php">好友狀態(tài)更新</a></div>'
+' <div> </div>'
+' <div><a href="/friend/invite.php">邀請(qǐng)朋友加入</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" width="1" height="13" /></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" width="15" height="20" /></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">創(chuàng)建新群</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" width="1" height="13" /></div>'
+' '
+' <div id="hn4">'
+' <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" width="15" height="20" /></a><span id=head_msgdiv><a href="/msg/"><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 id=head_msg_num></span></a></div>'
+' <div><a href="/msg/sys.php?t=' + Math.ceil(Math.random() * 100) + '"">系統(tǒng)消息<span id=head_sysmsg_num></span></a></div>'
+' <div> </div>'
+' <div><a href="/comment/?t=' + Math.ceil(Math.random() * 100) + '">評(píng)論<span id=head_comment_num></span></a></div>'
+' <div><a href="/comment/send.php?t=' + Math.ceil(Math.random() * 100) + '">評(píng)論回復(fù)<span id=head_reply_num></span></a></div>'
+' <div><a href="/comment/uindex.php?t=' + Math.ceil(Math.random() * 100) + '">留言板<span id=head_bbs_num></span></a></div>'
+' <div><a href="/comment/usend.php?t=' + Math.ceil(Math.random() * 100) + '">留言回復(fù)<span id=head_bbsreply_num></span></a></div>'
+' </div>'
+' </div>'
+' <div id="hn_xx4"></div>'
+' '
+' <div></div>'
+' </div>'
+' <div><a href="/friend/invite.php">邀請(qǐng)</a> ┊ <a href="/friend/search.php">找人</a> ┊ <a href="/set/account.php">賬戶(hù)</a> ┊ <a href="/set/privacy.php">隱私</a> ┊ <a href="/login/logout.php">退出</a></div>'
+' <div></div>'
+' </div>'
+'</div>'
+'<div id="head_msgsound_div"></div>'
+'<div id="main">'
+' <div>'
+' <div></div>'
+' <div id="app_friend_tip">'
+' </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 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 + '" width="28" height="24" /> <a href="' + v_link + '" ><b>' + v_title + '</b></a></div>'
+' <div id="app_friend_' + v_aid + '" 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" /></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>';
}
return '';
}
function setApplistHiddenHead()
{
document.writeln(_setApplistHiddenHead());
}
function _setApplistHiddenTail()
{
if (g_app_num==-1) return '';
if (g_bappmore)
{
return '</span><div id=applistscroll><img src="http://img.kaixin001.com.cn/i2/xiala.gif" width="5"> <a href="javascript:showAppmore();">展開(kāi)</a> </div>';
}
return '';
}
function setApplistHiddenTail()
{
document.writeln(_setApplistHiddenTail());
}
function outputHead2()
{
document.write('<div><img src="http://img.kaixin001.com.cn/i/index_app.gif" width="120" height="2" /></div> <div> <div id="install_tips"> <div><img src="http://img.kaixin001.com.cn/i2/black_del.gif" onclick="h(\'install_tips\')" /></div> <p>點(diǎn)擊這里，添加各種實(shí)用或游戲組件</p></div> <div><img src="http://img.kaixin001.com.cn/i/index_app_add1.gif" width="9" height="9" /> <a href="/app/list.php">添加組件</a></div> </div> <div><img src="http://img.kaixin001.com.cn/i/index_app_set1.gif" width="9" height="9" /> <a href="/set/appman.php">組件設(shè)置</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"> <a href="javascript:showAppmore();">收起</a> ';
}
else
{
$("applistmore").style.display="none";
$("applistscroll").innerHTML = '<img src="http://img.kaixin001.com.cn/i2/xiala.gif" width="5"> <a href="javascript:showAppmore();">展開(kāi)</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">關(guān)于我們</a><span>┊</span><a href="/s/contact.html" target="_blank">聯(lián)系方式</a><span>┊</span><a href="/t/feedback.html" target="_blank">意見(jiàn)反饋</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號(hào)</a> </div>'
+'</div>');
}
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。