如何写一个网页标题title的闪动提示

最新推荐文章于 2020-11-09 21:03:40 发布

ww122081351

最新推荐文章于 2020-11-09 21:03:40 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： jquery ajax js

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

通过网页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){}对它进行特殊处理了

分享下源代码：

<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当提示消息中有一个或没有半角字符时没问题。

转载随意，但请带上本文地址：

http://www.nowamagic.net/librarys/veda/detail/1668