网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JS实现消息来时让网页标题闪动效果的方法
内容
    这篇文章主要介绍了JS实现消息来时让网页标题闪动效果的方法,实例分析了JavaScript基于时间函数动态操作页面元素的技巧,并附带了开心网的标题闪动解决方案,需要的朋友可以参考下
    本文实例讲述了JS实现消息来时让网页标题闪动效果的方法。分享给大家供大家参考，具体如下：
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>无标题页</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>
    参考开心网的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) + '">首页</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/">我的首页</a></div>'
    +'          <div> </div>'
    +'          <div>我的首页预览：</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>好友访问时</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>陌生人访问时</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">当前在线好友</a></div>'
    +'          <div><a href="/friend/group.php">好友管理</a></div>'
    +'          <div><a href="/home/fstatus.php">好友状态更新</a></div>'
    +'          <div> </div>'
    +'          <div><a href="/friend/invite.php">邀请朋友加入</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">创建新群</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) + '"">系统消息<span id=head_sysmsg_num></span></a></div>'
    +'          <div> </div>'
    +'          <div><a href="/comment/?t=' + Math.ceil(Math.random() * 100) + '">评论<span id=head_comment_num></span></a></div>'
    +'          <div><a href="/comment/send.php?t=' + Math.ceil(Math.random() * 100) + '">评论回复<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) + '">留言回复<span id=head_bbsreply_num></span></a></div>'
    +'        </div>'
    +'      </div>'
    +'      <div id="hn_xx4"></div>'
    +'      '
    +'      <div></div>'
    +'    </div>'
    +'    <div><a href="/friend/invite.php">邀请</a> ┊ <a href="/friend/search.php">找人</a> ┊ <a href="/set/account.php">账户</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();">展开</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>点击这里，添加各种实用或游戏组件</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">组件设置</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();">展开</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">关于我们</a><span>┊</span><a href="/s/contact.html" target="_blank">联系方式</a><span>┊</span><a href="/t/feedback.html" target="_blank">意见反馈</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号</a> </div>'
    +'</div>');
    }
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 9:52:46