zoukankan      html  css  js  c++  java
  • 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?

    思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【     】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示 消息中有‘数字’等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换 全角的字符,半角的空格替换半角的字符。

    但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。

    效果演示

    显示信息数:

    但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是 title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上 try{}catch(e){}对它进行特殊处理了

    分享下源代码:

    01 <script type="text/javascript" language="javascript">
    02     var flashTitlePlayer = {
    03         start: function (msg) {
    04             this.title = document.title;
    05             if (!this.action) {
    06                 try {
    07                     this.element = document.getElementsByTagName('title')[0];
    08                     this.element.innerHTML = this.title;
    09                     this.action = function (ttl) {
    10                         this.element.innerHTML = ttl;
    11                     };
    12                 } catch (e) {
    13                     this.action = function (ttl) {
    14                         document.title = ttl;
    15                     }
    16                     delete this.element;
    17                 }
    18                 this.toggleTitle = function () {
    19                     this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】欢迎访问简明现代魔法');
    20                 };
    21             }
    22             this.messages = [msg];
    23             var n = msg.length;
    24             var s = '';
    25             if (this.element) {
    26                 var num = msg.match(/w/g);
    27                 if (num != null) {
    28                     var n2 = num.length;
    29                     n -= n2;
    30                     while (n2 > 0) {
    31                         s += " ";
    32                         n2--;
    33                     }
    34                 }
    35             }
    36             while (n > 0) {
    37                 s += ' ';
    38                 n--;
    39             };
    40             this.messages.push(s);
    41             this.index = 0;
    42             this.timer = setInterval(function () {
    43                 flashTitlePlayer.toggleTitle();
    44             }, 1000);
    45         },
    46         stop: function () {
    47             if (this.timer) {
    48                 clearInterval(this.timer);
    49                 this.action(this.title);
    50                 delete this.timer;
    51                 delete this.messages;
    52             }
    53         }
    54     };
    55     function flashTitle(msg) {
    56         flashTitlePlayer.start(msg);
    57     }
    58     function stopFlash() {
    59         flashTitlePlayer.stop();
    60     }
    61 </script>

    火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。

  • 相关阅读:
    PAT 解题报告 1009. Product of Polynomials (25)
    PAT 解题报告 1007. Maximum Subsequence Sum (25)
    PAT 解题报告 1003. Emergency (25)
    PAT 解题报告 1004. Counting Leaves (30)
    【转】DataSource高级应用
    tomcat下jndi配置
    java中DriverManager跟DataSource获取getConnection有什么不同?
    理解JDBC和JNDI
    JDBC
    Dive into python 实例学python (2) —— 自省,apihelper
  • 原文地址:https://www.cnblogs.com/xingmeng/p/3254719.html
Copyright © 2011-2022 走看看