如何寫一個網頁標題title的閃動提示

一個網頁消息提示功能的實現
服務器君一共花費了117.849 ms進行了5次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

通過網頁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.824886.live/librarys/veda/detail/1668,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.824886.live/librarys/veda/detail/1668

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏。

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《人月神話》 弗雷德里克·布魯克斯 (作者), 汪穎 (譯者)

《人月神話》原文:The Mythical Man-Month: The Essays on Software Engineering, 2nd ed.在軟件領域,很少能有像《人月神話》一樣具有深遠影響力并且暢銷不衰的著作。Brooks博士為人們管理復雜項目提供了最具洞察力的見解。既有很多發人深省的觀點,又有大量軟件工程的實踐。本書內容來自Brooks博士在IBM公司System/360家族和OS/360中的項目管理經驗。該書英文原版一經面世,即引起業內人士的強烈反響,后又譯為德、法、日、俄中等多種語言,全球銷量數百萬冊。確立了其在行業內的經典地位。

更多計算機寶庫...

云南快乐十分走势一定牛 多多乐彩泥 捕鱼大师现金版官网 东方6 1开奖规则 九游棋牌游戏中心下载 股票发行方式 黑龙江大庆麻将 期期规律三肖 河北20选五好运三 平特一肖怎样买才稳 东北填大坑app