JS实现消息来时让网页标题闪动效果的方法
本文实例讲述了JS实现消息来时让网页标题闪动效果的方法。分享给大家供大家参考，具体如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<script>
varg_blinkid=0;
varg_blinkswitch=0;
varg_blinktitle=document.title;
varg_onlineuser="";
varg_sysmsg_sound=null;
varg_newmsg_sound=null;
varg_app_num=0;
varg_appnum=0;
varg_bappmore=false;
varg_inputtime=0;
functionblinkNewMsg()
{
document.title=g_blinkswitch%2==0?"【】-"+g_blinktitle:"【新消息】-"+g_blinktitle;
g_blinkswitch++;
}
g_blinkid=setInterval(blinkNewMsg,1000);
functionstopBlinkNewMsg()
{
if(g_blinkid)
{
clearInterval(g_blinkid);
g_blinkid=0;
document.title=g_blinktitle;
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="Button1"type="button"value="button"onclick="stopBlinkNewMsg();"/>
</div>
</form>
</body>
</html>
参考开心网的head-26.js
varg_blinkid=0;
varg_blinkswitch=0;
varg_blinktitle=document.title;
varg_onlineuser="";
varg_sysmsg_sound=null;
varg_newmsg_sound=null;
varg_app_num=0;
varg_appnum=0;
varg_bappmore=false;
varg_inputtime=0;
functionblinkNewMsg()
{
varnow=newDate();
varnowtime=now.getTime();
if(nowtime-g_inputtime>5000)
{
document.title=g_blinkswitch%2?"【】-"+g_blinktitle:"【新消息】-"+g_blinktitle;
}
g_blinkswitch++;
}
functionblinkOnline()
{
document.title=g_blinkswitch%2?"○"+g_onlineuser+"上线了-"+g_blinktitle:"●"+g_onlineuser+"上线了-"+g_blinktitle;
g_blinkswitch++;
if(g_blinkswitch>10)
{
stopBlinkNewMsg();
}
}
functioncheckNewMsg()
{
varurl="/home/newmsg.php";
varpars="";
varmyAjax=newAjax.Request(url,{method:"post",parameters:pars,onComplete:function(req){checkNewMsgShow(req);}});
}
functionstopBlinkNewMsg()
{
if(g_blinkid)
{
clearInterval(g_blinkid);
g_blinkid=0;
$("head_msgdiv").style.display="none";
document.title=g_blinktitle;
}
}
varg_oldmsg=g_oldsysmsg=g_oldbbs=g_oldbbsreply=g_oldcomment=g_oldreply=0;
functioncheckNewMsgShow(req)
{
varr=req.responseText;
stopBlinkNewMsg();
setTimeout(checkNewMsg,60000);
eval("r="+r);
vara_msglist=newArray("msg","sysmsg","bbs","bbsreply","comment","reply");
if(r.notice=="1")
{
varforbidsound=parseInt(r.forbidsound);
if(!forbidsound)
{
for(i=0;i<a_msglist.length;i++)
{
if($("body_"+a_msglist[i]+"_num"))
{
varc=parseInt($("body_"+a_msglist[i]+"_num").innerHTML);
eval("g_old"+a_msglist[i]+"=c;");
}
}
varnewmsg=parseInt(r.msg)+parseInt(r.bbs)+parseInt(r.bbsreply)+parseInt(r.comment)+parseInt(r.reply);
varsysmsg=parseInt(r.sysmsg);
varnewchange=(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);
varsyschange=(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=newSWFObject("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");
}
elseif(sysmsg&&syschange)
{
if(g_sysmsg_sound==null)
{
g_sysmsg_sound=newSWFObject("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);
}
elseif(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();
};
}
}
}
}
functionoutputHead()
{
varv_html=
'<divid="head">'
+'<divclass="hd">'
+'<divclass="h1wl1"style="margin-top:3px;">'
+'<divstyle="padding-left:18px;"><ahref="/"class="cf"title="开心网"><imgsrc="http://img.kaixin001.com.cn/i2/kaixinlogo.gif"alt="开心网"width="106"height="36"/></a></div>'
+'</div>'
+'<divclass="h2">'
+'<divid="hn1"class="hn_of">'
+'<divclass="hn_tt"><ahref="/home/?t='+Math.ceil(Math.random()*100)+'"class="n">首页</a></div>'
+'<divclass="hn_sj"><ahref="javascript:xs(1);"class="sj"><imgsrc="http://img.kaixin001.com.cn/i/r_sj.gif"width="15"height="20"/></a></div>'
+'<divclass="c"></div>'
+'<divid="hn1_l"class="hn_l">'
+'<div><ahref="/home/"class="hnm">我的首页</a></div>'
+'<divclass="l1_h"> </div>'
+'<divclass="c9m0_15">我的首页预览：</div>'
+'<div>'
+'<ahref="/home/?_preview=friend"class="hnm"target=_blankonclick="javascript:hy();">'
+'<divclass="l"style="margin:5px3px;"><imgsrc="http://img.kaixin001.com.cn/i/small-tri.gif"width="3"height="5"/></div>'
+'<divclass="l"style="cursor:pointer;">好友访问时</div>'
+'<divclass="c"></div>'
+'</a>'
+'</div>'
+'<divclass="mb10">'
+'<ahref="/home/?_preview=other"class="hnm"target=_blankonclick="javascript:hy();">'
+'<divclass="l"style="margin:5px3px;"><imgsrc="http://img.kaixin001.com.cn/i/small-tri.gif"width="3"height="5"/></div>'
+'<divclass="l"style="cursor:pointer;">陌生人访问时</div>'
+'<divclass="c"></div>'
+'</a>'
+'</div>'
+'</div>'
+'</div>'
+'<divid="hn_xx1"class="hn_xx"><imgsrc="http://img.kaixin001.com.cn/i/r_xx13.gif"width="1"height="13"/></div>'
+''
+'<divid="hn2"class="hn_of">'
+'<divclass="hn_tt"><ahref="/friend/?t='+Math.ceil(Math.random()*100)+'"class="n">好友</a></div>'
+'<divclass="hn_sj"><ahref="javascript:xs(2);"class="sj"><imgsrc="http://img.kaixin001.com.cn/i/r_sj.gif"width="15"height="20"/></a></div>'
+'<divclass="c"></div>'
+'<!--'
+'<iframestyle="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>'
+'-->'
+'<divid="hn2_l"class="hn_l"style="z-index:2">'
+'<div><ahref="/friend/"class="hnm">我的全部好友</a></div>'
+'<div><ahref="/friend/?viewtype=online"class="hnm">当前在线好友</a></div>'
+'<div><ahref="/friend/group.php"class="hnm">好友管理</a></div>'
+'<div><ahref="/home/fstatus.php"class="hnm">好友状态更新</a></div>'
+'<divclass="l1_h"> </div>'
+'<div><ahref="/friend/invite.php"class="hnm">邀请朋友加入</a></div>'
+'<div><ahref="/friend/search.php"class="hnm">查找朋友</a></div>'
+'</div>'
+'</div>'
+'<divid="hn_xx2"class="hn_xx"><imgsrc="http://img.kaixin001.com.cn/i/r_xx13.gif"width="1"height="13"/></div>'
+''
+'<divid="hn3"class="hn_of">'
+'<divclass="hn_tt"><ahref="/group/?t='+Math.ceil(Math.random()*100)+'"class="n">群</a></div>'
+'<divclass="hn_sj"><ahref="javascript:xs(3);"class="sj"><imgsrc="http://img.kaixin001.com.cn/i/r_sj.gif"width="15"height="20"/></a></div>'
+'<divclass="c"></div>'
+'<divid="hn3_l"class="hn_l">'
+'<div><ahref="/group/"class="hnm">我的群</a></div>'
+'<div><ahref="/group/flist.php"class="hnm">好友的群</a></div>'
+'<divclass="l1_h"> </div>'
+'<div><ahref="/group/new.php"class="hnm">创建新群</a></div>'
+'<div><ahref="/group/search.php"class="hnm">全部群</a></div>'
+'</div>'
+'</div>'
+'<divid="hn_xx3"class="hn_xx"><imgsrc="http://img.kaixin001.com.cn/i/r_xx13.gif"width="1"height="13"/></div>'
+''
+'<divid="hn4"class="hn_of"style="padding-right:28px;">'
+'<divclass="hn_tt"><ahref="/msg/?t='+Math.ceil(Math.random()*100)+'"class="n">消息</a></div>'
+'<divclass="hn_sj"><ahref="javascript:xs(4);"class="sj"><imgsrc="http://img.kaixin001.com.cn/i/r_sj.gif"width="15"height="20"/></a><spanstyle="position:absolute;top:5px;left:65px;display:none;"id=head_msgdiv><ahref="/msg/"class="n"style="margin-top:-5px;"><imgsrc="http://img.kaixin001.com.cn/i/ddtx.gif"onmouseover="javascript:xs(4);"border=0></a></span></div>'
+'<divclass="c"></div>'
+'<divid="hn4_l"class="hn_l">'
+'<div><ahref="/msg/inbox.php?t='+Math.ceil(Math.random()*100)+'"class="hnm">短消息<spanstyle="padding-left:2px;color:red;"id=head_msg_num></span></a></div>'
+'<div><ahref="/msg/sys.php?t='+Math.ceil(Math.random()*100)+'"class="hnm"">系统消息<spanstyle="padding-left:2px;color:red;"id=head_sysmsg_num></span></a></div>'
+'<divclass="l1_h"> </div>'
+'<div><ahref="/comment/?t='+Math.ceil(Math.random()*100)+'"class="hnm">评论<spanstyle="padding-left:2px;color:red;"id=head_comment_num></span></a></div>'
+'<div><ahref="/comment/send.php?t='+Math.ceil(Math.random()*100)+'"class="hnm">评论回复<spanstyle="padding-left:2px;color:red;"id=head_reply_num></span></a></div>'
+'<div><ahref="/comment/uindex.php?t='+Math.ceil(Math.random()*100)+'"class="hnm">留言板<spanstyle="padding-left:2px;color:red;"id=head_bbs_num></span></a></div>'
+'<div><ahref="/comment/usend.php?t='+Math.ceil(Math.random()*100)+'"class="hnm">留言回复<spanstyle="padding-left:2px;color:red;"id=head_bbsreply_num></span></a></div>'
+'</div>'
+'</div>'
+'<divid="hn_xx4"class="hn_xx"></div>'
+''
+'<divclass="c"></div>'
+'</div>'
+'<divclass="h3"><ahref="/friend/invite.php"class="ce">邀请</a>┊<ahref="/friend/search.php"class="ce">找人</a>┊<ahref="/set/account.php"class="ce">账户</a>┊<ahref="/set/privacy.php"class="ce">隐私</a>┊<ahref="/login/logout.php"class="ce">退出</a></div>'
+'<divclass="c"></div>'
+'</div>'
+'</div>'
+'<divid="head_msgsound_div"style="left:0;top:0;position:absolute;"></div>'
+'<divid="main">'
+'<divclass="m1wl1">'
+'<divclass="m1t"></div>'
+'<divid="app_friend_tip"style="z-index:20000;position:absolute;background:#fff;border:2pxsolid#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=
'<divstyle="margin:12px15px12px15px;"onmouseover="javascript:if(\''+v_index_num+'\'==\'1\'){$(\'app_friend_'+v_aid+'\').style.display=\'block\';}"onmouseout="javascript:$(\'app_friend_'+v_aid+'\').style.display=\'none\';">'
+'<divclass="l"><imgsrc="'+v_icon+'"width="28"height="24"align="absmiddle"/><ahref="'+v_link+'"class="sl"title="'+v_title+'"><bclass="f14">'+v_title+'</b></a></div>'
+'<divclass="l"id="app_friend_'+v_aid+'"style="display:none;padding:8px3px;cursor:pointer;"onclick="javascript:a_appfriend_show('+v_aid+',\''+v_link+'\',\''+v_title+'\');"><imgsrc="http://img.kaixin001.com.cn/i2/xiasanjiao.gif"width="7"height="4"alt="快速查看你所有好友的'+v_title+'内容"align="absmiddle"/></div>'
+'<divclass="c"></div>'
+'</div>';
returnv_html;
}
functionoutputApp(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'<spanid=applistmorestyle="display:none">';
}
return'';
}
functionsetApplistHiddenHead()
{
document.writeln(_setApplistHiddenHead());
}
function_setApplistHiddenTail()
{
if(g_app_num==-1)return'';
if(g_bappmore)
{
return'</span><divid=applistscrollclass="tar"style="margin-top:-10px;"><imgsrc="http://img.kaixin001.com.cn/i2/xiala.gif"width="5"align="absmiddle"><ahref="javascript:showAppmore();"class="sl-gray"style="text-decoration:none;"title="列出我的全部组件">展开</a> </div>';
}
return'';
}
functionsetApplistHiddenTail()
{
document.writeln(_setApplistHiddenTail());
}
functionoutputHead2()
{
document.write('<divclass="tacmb5"><imgsrc="http://img.kaixin001.com.cn/i/index_app.gif"width="120"height="2"/></div><divstyle="position:relative;"><divclass="install_tips"id="install_tips"style="position:absolute;left:110px;top:-7px;z-index:99;display:none;"><divclass="tar"style="padding:7px15px00;"><imgsrc="http://img.kaixin001.com.cn/i2/black_del.gif"title="关闭"style="cursor:pointer;"onclick="h(\'install_tips\')"/></div><pstyle="padding:0px20px;">点击这里，添加各种实用或游戏组件</p></div><divclass="p5m0_10tac"><imgsrc="http://img.kaixin001.com.cn/i/index_app_add1.gif"width="9"height="9"title="添加组件"/><ahref="/app/list.php"class="sl2">添加组件</a></div></div><divclass="p5m0_10tac"style="margin-top:-8px;"><imgsrc="http://img.kaixin001.com.cn/i/index_app_set1.gif"width="9"height="9"title="组件设置"/><ahref="/set/appman.php"class="sl2">组件设置</a></div></div>');
}
functionshowAppmore()
{
if($("applistmore").style.display=="none")
{
$("applistmore").style.display="block";
$("applistscroll").innerHTML='<imgsrc="http://img.kaixin001.com.cn/i2/shouqi.gif"width="5"align="absmiddle"><ahref="javascript:showAppmore();"class="sl-gray"style="text-decoration:none;">收起</a> ';
}
else
{
$("applistmore").style.display="none";
$("applistscroll").innerHTML='<imgsrc="http://img.kaixin001.com.cn/i2/xiala.gif"width="5"align="absmiddle"><ahref="javascript:showAppmore();"class="sl-gray"style="text-decoration:none;">展开</a> ';
}
}
functionoutputAppInfo()
{
if(g_allapp_num>g_prevapp_num)
{
varurl="/app/left.php";
varpars="";
varmyAjax=newAjax.Request(url,{method:"post",parameters:pars,onComplete:function(req){outputAppInfoAjaxShow(req);}});
}
}
functionoutputAppInfoAjaxShow(req)
{
eval("data="+req.responseText);
varv_html='';
for(vari=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;
}
functionoutputTail()
{
document.writeln('<divclass="c"></div>'
+'</div>'
+'<divid="b">'
+'<divclass="b1"><ahref="/s/about.html"class="c6"target="_blank">关于我们</a><span>┊</span><ahref="/s/contact.html"class="c6"target="_blank">联系方式</a><span>┊</span><ahref="/t/feedback.html"class="c6"target="_blank">意见反馈</a><span>┊</span><ahref="/s/help.html"class="c6"target="_blank">帮助中心</a>©2009kaixin001.com <aclass=c6href=http://www.miibeian.gov.cntarget=_blank>京ICP证080482号</a></div>'
+'</div>');
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。