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

一个网页消息提示功能的实现
服务器君一共花费了281.847 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

通过网页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">
        var flashTitlePlayer = {
            start: function (msg) {
                this.title = document.title;
                if (!this.action) {
                    try {
                        this.element = document.getElementsByTagName('title')[0];
                        this.element.innerHTML = this.title;
                        this.action = function (ttl) {
                            this.element.innerHTML = ttl;
                        };
                    } catch (e) {
                        this.action = function (ttl) {
                            document.title = ttl;
                        }
                        delete this.element;
                    }
                    this.toggleTitle = function () {
                        this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】欢迎访问简明现代魔法');
                    };
                }
                this.messages = [msg];
                var n = msg.length;
                var s = '';
                if (this.element) {
                    var num = msg.match(/\w/g);
                    if (num != null) {
                        var n2 = num.length;
                        n -= n2;
                        while (n2 > 0) {
                            s += " ";
                            n2--;
                        }
                    }
                }
                while (n > 0) {
                    s += ' ';
                    n--;
                };
                this.messages.push(s);
                this.index = 0;
                this.timer = setInterval(function () {
                    flashTitlePlayer.toggleTitle();
                }, 1000);
            },
            stop: function () {
                if (this.timer) {
                    clearInterval(this.timer);
                    this.action(this.title);
                    delete this.timer;
                    delete this.messages;
                }
            }
        };
        function flashTitle(msg) {
            flashTitlePlayer.start(msg);
        }
        function stopFlash() {
            flashTitlePlayer.stop();
        }
    </script>

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

本文地址:http://www.nowamagic.net/librarys/veda/detail/1668,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

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

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《代码大全(第2版)》 史蒂夫•迈克康奈尔 (Steve McConnell) (作者), 金戈 (译者)

代码大全(第2版)是著名IT畅销书作者、《IEEE Software》杂志前主编、具有20年编程与项目管理经验的Steve McConnell十余年前的经典著作的全新演绎:第2版做了全面的更新,增加了很多与时俱进的内容,包括对新语言、新的开发过程与方法论的讨论等等。这是一本百科全书式的软件构建手册,涵盖了软件构建活动的方方面面,尤其强调提高软件质量的种种实践方法。

更多计算机宝库...