首页 > 代码库 > 网页title标题的闪动效果

网页title标题的闪动效果

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

1 显示信息数:2 <input type="text" id="textMsgs"/>3 <button title="开始闪动" onclick="flashTitle(‘您有‘ + document.getElementById(‘textMsgs‘).value + ‘条新信息‘);">开始闪动</button>4 <button title="停止闪动" onclick="stopFlash();">停止闪动</button>
 1 var flashTitlePlayer = { 2         start: function (msg) { 3             this.title = document.title; 4             if (!this.action) { 5                 try { 6                     this.element = document.getElementsByTagName(‘title‘)[0]; 7                     this.element.innerHTML = this.title; 8                     this.action = function (ttl) { 9                         this.element.innerHTML = ttl;10                     };11                 } catch (e) {12                     this.action = function (ttl) {13                         document.title = ttl;14                     }15                     delete this.element;16                 }17                 this.toggleTitle = function () {18                     this.action(‘【‘ + this.messages[this.index = this.index == 0 ? 1 : 0] + ‘】来到博客园!‘);19                 };20             }21             this.messages = [msg];22             var n = msg.length;23             var s = ‘‘;24             if (this.element) {25                 var num = msg.match(/\w/g);26                 if (num != null) {27                     var n2 = num.length;28                     n -= n2;29                     while (n2 > 0) {30                         s += " ";31                         n2--;32                     }33                 }34             }35             while (n > 0) {36                 s += ‘ ‘;37                 n--;38             };39             this.messages.push(s);40             this.index = 0;41             this.timer = setInterval(function () {42                 flashTitlePlayer.toggleTitle();43             }, 1000);44         },45         stop: function () {46             if (this.timer) {47                 clearInterval(this.timer);48                 this.action(this.title);49                 delete this.timer;50                 delete this.messages;51             }52         }53     };54     function flashTitle(msg) {55         flashTitlePlayer.start(msg);56     }57     function stopFlash() {58         flashTitlePlayer.stop();59     }