本文實例講述了js實現網頁標題欄閃爍提示效果的方法。分享給大家供大家參考。具體分析如下：
網頁標題欄閃爍效果我們在一些聊天工具會常看到，像現在流量的聊天室，下面我們就來給大家總結一款實現網頁標題欄閃爍提示代碼，感興趣可參考一下。
公司的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實現代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var newMessageRemind={_step: 0,_title: document.title,_timer: null,//顯示新消息提示show:function(){var temps = newMessageRemind._title.replace("【 】", "").replace("【新消息】", "");newMessageRemind._timer = setTimeout(function() {newMessageRemind.show();//這里寫Cookie操作newMessageRemind._step++;if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };if (newMessageRemind._step == 1) { document.title = "【 】" + temps };if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };}, 800);return [newMessageRemind._timer, newMessageRemind._title];},//取消新消息提示clear: function(){clearTimeout(newMessageRemind._timer );document.title = newMessageRemind._title;//這里寫Cookie操作}}; |
調用顯示新消息提示：newMessageRemind.show();
調用取消新消息提示：newMessageRemind.clear();
看了上面代碼自己再進行優化一下,不管怎樣，自己能吸收學習到就好了。：）我主要是覺得他代碼里面 newMessageRemind 這字段用得太多了，看起來密密麻麻的，多不舒服啊，想著換一種小清新的方式展現出來，于是乎就有了下面的代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var newMessageRemind = function () { var i = 0, title = document.title, loop; return { show: function () { loop = setInterval(function () { i++; if ( i == 1 ) document.title = '【新消息】' + title; if ( i == 2 ) document.title = '【 】' + title; if ( i == 3 ) i = 0; }, 800); }, stop: function () { clearInterval(loop); document.title = title; } }; } (); |
是不是清新了很多呢？^_^
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>放假啦?。?！</title></head><body><button id="test">stop</button><script type="text/javascript">var newMessageRemind = function () { var i = 0, title = document.title, loop; return { show: function () { loop = setInterval(function () { i++; if ( i == 1 ) document.title = '【新消息】' + title; if ( i == 2 ) document.title = '【 】' + title; if ( i == 3 ) i = 0; }, 800); }, stop: function () { clearInterval(loop); document.title = title; } };} ();newMessageRemind.show();document.getElementById('test').onclick = function () { newMessageRemind.stop();};</script></body></html> |
繼續分享一個
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script>(function() { var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function() { if (document.hidden) { document.title = '死鬼去哪里了！'; clearTimeout(titleTime); } else { document.title = '(つェ⊂)咦!又好了!'; titleTime = setTimeout(function() { document.title = OriginTitile; },2000); } });})();</script> |
希望本文所述對大家的javascript程序設計有所幫助。
