网页title标题的闪动效果

浏览数：23 / 时间：2015年06月09日

通过网页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     }