Este artigo descreve como o JS implementa o efeito de fazer títulos da página da web piscar quando as mensagens vêm. Compartilhe -o para sua referência, como segue:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "servidor"> <título> unt Page </ititle> <cript> var g_blinkid = 0; var g_blinkswitch = 0; var g_blinktitle = document; = null; var g_newmsg_sound = null; var g_app_num = 0; var g_appnum = 0; var g_bappmore = false; var g_inputTime = 0; function bishnewmsg () {document.title = g_blinkswitch % 2 == 0? "【】 -" + g_blinktitle: "【novas notícias】 -" + g_blinktitle; g_blinkswitch ++;} g_blinkId = setInterval (blinkNewmsg, 1000); função stopBlinkNewmsg () {if (g_blinkId) {clearInterval (g_blinkId); g_blinkId = 0; document.title = g_blinktitle; }} </script> </ad Head> <body> <form id = "form1" runat = "server"> <div> <input id = "button1" type = "button" value = "button" onclick = "stopBlinkNewmsg ();" /> </div> </morm> </body> </html>Consulte o Head-26.js de Kaixin.com
var g_blinkId = 0; var g_blinkswitch = 0; var g_blinkTitle = document.title; var g_onlineUser = ""; var g_sysmg_sound = null; var g_newmsg_sound = null; var g_app_num = 0; var g_appnum = 0; phLlinkNewmsg () {var agora = new Date (); var agora = agora.getTime (); if (NowTime - g_inputTime> 5000) {document.title = g_blinkswitch % 2? "【】 -" + g_blinktitle: "【novas notícias】 -" + g_blinktitle; } g_blinkswitch ++;} function blinkonline () {document.title = g_blinkswitch % 2? "○" + g_onlineUser + "está online-" + g_blinktitle: "●" + g_onlineUser + "está online-" + g_blinktitle; g_blinkswitch ++; if (g_blinkswitch> 10) {stopBlinkNewmsg (); }} função checkNewmsg () {var url = "/home/newmsg.php"; var pars = ""; var myajax = new ajax.request (url, {método: "post", parâmetros: pars, oncomplete: function (req) {checkNewmsgShow (req);}});} função stopBlinkNewmsg () {if (g_blinkid) {clearInterVal (ginkl) g_blinkId = 0; $ ("head_msgdiv"). style.display = "nenhum"; document.title = g_blinktitle; }} var g_oldmsg = g_oldsysmg = g_oldbbs = g_oldbbsReply = g_oldComment = g_oldreply = 0; function checkNewmsgShow (req) {var r = req.Responsext; stopBlinkNewmsg (); setTimeout (CheckNewmsg, 60000); Eval ("r ="+r); var a_msglist = new Array ("msg", "sysmsg", "bbsreply", "Comentário", "Responder"); 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"). Eval ("g_old" + a_msglist [i] + "= c;"); }} var newnsg = parseint (r.msg) + parseint (r.bbs) + parseint (r.bbsreply) + parseint (r.comment) + parseint (r.reply); var sysmsg = parseint (r.sysg); var neardchange = (parseint (r.msg) - g_oldmsg) || (Parseint (r.bbs) - g_oldbbs) || (Parseint (r.bbsreply) - g_oldbbsreply) || (Parseint (R.comment) - G_OLDCOMENT) || (parseint (r.reply) - g_oldreply); var sysChange = (parseint (r.sysMG) - g_oldsysMSG); for (i = 0; i <a_msglist.length; i ++) {avaliar ("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.sg.sg. "#ffffff", verdadeiro); g_newmsg_sound.addparam ("PermisscriptAccess", "sempre"); g_newmsg_sound.addparam ("wmode", "opacque"); 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", verdadeiro); g_sysmsg_sound.addparam ("PermisscriptAccess", "sempre"); g_sysmsg_sound.addparam ("wmode", "opacque"); g_sysmsg_sound.addparam ("menu", "false"); g_sysmsg_sound.addvariable ("AutoPlay", "0"); } g_sysmsg_sound.write ("head_msgsound_div"); }} $ ("head_msgdiv"). style.display = "bloco"; g_blinkId = setInterval (BlinkNewmsg, 1000); } else if (0 && r.online.length) {g_blinkswitch = 0; g_onlineUser = r.online; g_blinkId = setInterval (Blinkonline, 500); } para (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 novos itens"; }} else {$ ("head_" + a_msglist [i] + "_num"). inerhtml = "(" + r [a_msglist [i] + ")"; if ($ ("body_" + a_msglist [i] + "_num")) {$ ("body_" + a_msglist [i] + "_num"). className = "cr"; $ ("body_" + a_msglist [i] + "_num"). inerhtml = r [a_msglist [i]] + "new"; } if (a_msglist [i] == "msg") {if ('function' == typeof (msg_view_checknewmsg)) {msg_view_checknewmsg (); }; }}}} função 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"> '+' <a href = "//? '"> Home </a> </div>'+'<div> <a href =" javascript: xs (1); "> <img src =" http://img.kaixin001.com.cn/i/r_sj.gif "/> </a> </divid <div> <a href = "/home/"> minha página inicial </a> </div> '+' <div> <a href = "/home/"> minha página inicial </a> </div> '+' <div> minha página inicial visualização: </div> '+' <d> '+' <a href = "//? OnClick = "Javascript: hy ();"> '+' <div> style = "margem: 5px 3px;"> <img src = "http://img.kaixin001.com.cn/i/small-ti.gif"/> </div> '' <div estilo = "" <div> </div> '+' </a> '+' </div> '+' <div> '+' <a href = "/home/? _ visualize = outro" Target = _blank onclick = "javascript: hy ();" " > '+' <div style = "margem: 5px 3px;"> <img src = "http://img.kaixin001.com.cn/i/small-tri.gif"/> </div> '+' <style = "cursor: ponter;/quando um stranser </divi> </div> '+' </div> '+' </div> '+' <div id = "hn_xx1"> <img src = "http://img.kaixin001.com.cn/i/r_xx13.gif"/> </div '' ''+'<div id = "hn2"> "> 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 = "posição: absoluto; z-index: 1; largura: expressão (this.nextsibling.offsetWidth); altura: expressão (this.nextsbling.offSethEight); top: expressão (this.NextSibling.SextTop); expressão (this.nextSibling.fllEft); frameborder = "0">/iframe> '+'-> '+' <div id = "hn2_l" style = "z-index: 2"> '+' <div> <a href = "/amigo/"> meados </a> </div> '+' <div> <a href = "/amigas/? ViewType = online href = "/amigo/group.php"> gestão de amigos </a> </div> '+' <div> <a href = "/home/fstatus.php"> status de amigo atualização </a> </div> '+' <div> <a href = "/friend/convite.php Avite para ingressar </a> href = "/amigo/search.php"> encontre amigos </a> </div> '+' </div> '+' <div> <a href = "/amigo/search.php"> encontre amigos </a> </div> '+' </div> '+' <div = "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) 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 Grupo </a> </div> '+' <div> <a href = "/group/flist.php"> amigos </a> </div> '+' <div> <a href = "/group/new.php"> Crie um novo grupo </a> </div> '' <div> <a href = "/grupo/pesquisa.php" <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 = "estofamento-right: 28px;"> '+' <div> <a href = "/msg/? t = '+math.ceil (math.random () * 100)+' '> mensagem </a> </div>'+'<d); src = "http://img.kaixin001.com.cn/i/r_sj.gif"/> </a> <span style = "Posição: absoluto; topo: 5px; esquerda: 65px; display: nenhum;" " id = head_msgdiv> <a href = "/msg/" style = "margin-top: -5px;"> <img src = "http://img.kaixin001.com.cn/i/ddtx.gif" onMouseover = "javascript: xs (4);" borda = 0> </a> </span> </div> '+' <div> </div> '+' <div id = "hn4_l"> '+' <div> <a href = "/msg/inbox.php? t = ''+math.ceil (math.random () * 100)+'"> curto <spany = "" " id = head_msg_num> </span> </a> </div> ' +' <div> <a href = "/msg/sys.php? t = ' + math.ceil (math.random () * 100) +'" "> mensagem do sistema <style =" padding-left: 2px; color: red; "" ">"> <div> <a href = "/comentário/? t = ' + math.ceil (math.random () * 100) +'"> comentário <span style = "preenchimento-left: 2px; cor: vermelho;" Id = heft_comment_num> </span> </a> </div> '' '<div> <a href. 100) + '"> comente Responder <span style =" preenchimento-left: 2px; cor: vermelho; "id = head_reply_num> </span> </a> </div>' + '<div> <a href ="/comentário/uindex.php? T =' + math.ceil (math.random) * 100) + " id = head_bbs_num> </span> </a> </div> ' +' <div> <a href = "/comentário/usend.php? t = ' + math.ceil (math.random () * 100) +'"> deixe uma mensagem Responder <estilo "estilista = preenchimento: 2px;//Red; </div> '+' <div> <a href = "/amigo/convite.php"> convite </a> ┊ <a href = "/amigo/search.php"> procure alguém </a> ┊ <a href = "/set/conta.php"> </a> ┊ <a href = "/set/privact.P. 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> '+' id = "app_friend_tip" style = "z-index: 20000; posição: absoluto; background: #fff; borda: 2px sólido #F7f7f7; largura: 160px; altura: 250px; display: nenhum; "> '+' </div> '; document.writeln (v_html);} function _outputapp (v_icon, v_link, v_title, v_aid, v_index_num) {se + = "? t =" + math.ceil (math.random () * 100); '/' ==/'1/') {$ (/'App_friend_' + V_Aid + '/').style.display=/'block/';} "onmouseout =" javascript: $ (/'App_friend_' + v_aid + '/ v_icon + '"align =" absmiddle "/> <a href ="' + v_link + '"> <b>' + v_title + '</b> </a> </div>' + '<div id =" app_friend_' + v_aid + '"style =" Display: NOT; Padding: 8px 3px; OnClick = "Javascript: a_appfriend_show (' + v_aid +',/'' + v_link + '/',/'' ' + v_title +'/'); <div> </div> '+' </div> '; _setAppplisthing () {if (g_app_num ==-1) Retorno ''; document.writeln (_setapplisthidden ());} função _setapplisthiddentail () {if (g_app_num ==-1) return ''; src = http://img.kaixin001.com.cn/i2/xiala.gif "align =" absmiddle "> <a href =" javascript: showappmore (); 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; Esquerda: 110px; /> </div> <p style = "preenchimento: 0px 20px;"> Clique aqui para adicionar vários componentes práticos ou de jogo </p> </div> <div> <img src = "http://img.kaixin001.com.cn/i/index_app_add1.gif </div> <div style = "margin-top: -8px;"> <img src = "http://img.kaixin001.com.cn/i/index_app_apset1.gif"/> <a href = "/set/Appman.php"> SHOPTS </a> </Div> </div = "> </div ="> </div) </div = "> </div) </div ="> </div) </div) ($ ("applistmore"). style.display == "nenhum") {$ ("applistmore"). style.display = "bloco"; href = "javascript: showappmore (); align = "Absmiddle"> <a href = "javascript: showappmore (); Ajax.request (url, {método: "post", parâmetros: pars, oncomplete: function (req) {outputAppinfoajaxshow (req);}}); i <data.length; _setApplisthidDentail (); nós </a> </span> ┊ </span> <a href = "/s/contatth.html" target = "_ blank"> informações de contato </a> </span> ┊ </span> <a href = "/t/feedback.html" alvo = "_"> Target = "_ Blank"> Centro de Ajuda </a> © 2009 KAIXIN001.com <a class = C6 href = http: //www.miibeian.gov.cn Target = _blank> Beijing Certificado ICP 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 Habilidades de algoritmo "," Resumo dos algoritmos e técnicas de travessia de JavaScript "e" Resumo do uso de operações matemáticas de JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.