JS实现消息来时让网页标题闪动效果的方法

这篇文章主要介绍了JS实现消息来时让网页标题闪动效果的方法,实例分析了JavaScript基于时间函数动态操作页面元素的技巧,并附带了开心网的标题闪动解决方案,需要的朋友可以参考下

本文实例讲述了JS实现消息来时让网页标题闪动效果的方法。分享给大家供大家参考，具体如下：

参考开心网的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' +'  ' +'    ' +'      ' +'    ' +'    ' +'      ' +'        首页' +'        ' +'        ' +'        ' +'          我的首页' +'           ' +'          我的首页预览：' +'          ' +'            ' +'            ' +'            好友访问时' +'            ' +'            ' +'          ' +'          ' +'            ' +'            ' +'            陌生人访问时' +'            ' +'            ' +'          ' +'        ' +'      ' +'      ' +'      ' +'      ' +'        好友' +'        ' +'        ' +'        <!--' +'        ' +'        -->' +'        ' +'          我的全部好友' +'          当前在线好友' +'          好友管理' +'          好友状态更新' +'           ' +'          邀请朋友加入' +'          查找朋友' +'        ' +'      ' +'      ' +'    ' +'      ' +'        群' +'        ' +'        ' +'        ' +'          我的群' +'          好友的群' +'           ' +'          创建新群' +'          全部群' +'        ' +'      ' +'      ' +'    ' +'      ' +'        消息' +'        ' +'        ' +'        ' +'          短消息' +'          系统消息' +'           ' +'          评论' +'          评论回复' +'          留言板' +'          留言回复' +'        ' +'      ' +'      ' +'      ' +'      ' +'    ' +'    邀请 ┊ 找人 ┊ 账户 ┊ 隐私 ┊ 退出' +'    ' +'  ' +'' +'' +'' +'  ' +'    ' +'    ' +'    '; 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 = '' +'  ' + v_title + '' +'  ' +'  ' +''; 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 ''; } return ''; } function setApplistHiddenHead() { document.writeln(_setApplistHiddenHead()); } function _setApplistHiddenTail() { if (g_app_num==-1) return ''; if (g_bappmore) { return '展开  '; } return ''; } function setApplistHiddenTail() { document.writeln(_setApplistHiddenTail()); } function outputHead2() { document.write('  
点击这里，添加各种实用或游戏组件
添加组件组件设置'); } function showAppmore() { if ($("applistmore").style.display=="none") { $("applistmore").style.display="block"; $("applistscroll").innerHTML = '收起  '; } else { $("applistmore").style.display="none"; $("applistscroll").innerHTML = '展开  '; } } 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('' +'' +'' +'  关于我们┊联系方式┊意见反馈┊帮助中心　 © 2009 kaixin001.com  京ICP证080482号' +''); } 

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是JS实现消息来时让网页标题闪动效果的方法的详细内容，更多请关注本站其它相关文章！