js實現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果實例分析
本文實例講述了js實現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果的方法。分享給大家供大家參考。具體分析如下:
網(wǎng)頁標(biāo)題欄閃爍效果我們在一些聊天工具會常看到,像現(xiàn)在流量的聊天室,下面我們就來給大家總結(jié)一款實現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示代碼,感興趣可參考一下。
公司的項目中用到了這個新消息提示的效果,主要用于提示用戶有新消息。具體實現(xiàn)代碼如下:
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操作 } };
調(diào)用顯示新消息提示:newMessageRemind.show();
調(diào)用取消新消息提示:newMessageRemind.clear();
看了上面代碼自己再進行優(yōu)化一下,不管怎樣,自己能吸收學(xué)習(xí)到就好了。:)我主要是覺得他代碼里面 newMessageRemind 這字段用得太多了,看起來密密麻麻的,多不舒服啊,想著換一種小清新的方式展現(xiàn)出來,于是乎就有了下面的代碼:
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; } }; } ();
是不是清新了很多呢?^_^
<!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>
繼續(xù)分享一個
<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程序設(shè)計有所幫助。
相關(guān)文章
js簡單實現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡單實現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08javascript中的with語句學(xué)習(xí)筆記及用法
在本篇文章里小編給大家分享的是關(guān)于javascript中的with語句學(xué)習(xí)筆記及用法,有需要的朋友們可以學(xué)習(xí)下。2020-02-02uni-file-picker文件選擇上傳功能實現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07使用js檢測瀏覽器是否支持html5中的video標(biāo)簽的方法
這篇文章主要介紹了使用js檢測瀏覽器是否支持html5中的video標(biāo)簽的方法,需要的朋友可以參考下2014-03-03JavaScript使用Promise封裝Axios進行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進行高效開發(fā),Axios是一個基于Promise的HTTP庫,它可以幫助我們更方便地發(fā)起HTTP請求,并且提供了許多高級功能,感興趣的同學(xué)可以參考下文2023-05-05js實現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項卡效果
這篇文章主要介紹了js實現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項卡效果,涉及javascript鼠標(biāo)事件及頁面元素遍歷調(diào)用的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08canvas實現(xiàn)簡易的圓環(huán)進度條效果
本文主要分享了canvas實現(xiàn)簡易的圓環(huán)進度條效果的實例,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02