js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析
更新時間：2014年11月20日 11:35:15 投稿：shichen2014
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法,以實例形式分析了網(wǎng)上比較常見的實現(xiàn)方法,并對于原理進行分析并加以改進,最后給出了一個具體的應用實例供大家參考,需要的朋友可以參考下
本文實例講述了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法。分享給大家供大家參考。具體分析如下：
網(wǎng)頁標題欄閃爍效果我們在一些聊天工具會?？吹剑瘳F(xiàn)在流量的聊天室，下面我們就來給大家總結(jié)一款實現(xiàn)網(wǎng)頁標題欄閃爍提示代碼，感興趣可參考一下。
公司的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實現(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)化一下,不管怎樣，自己能吸收學習到就好了。：）我主要是覺得他代碼里面 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程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了Javascript數(shù)組常用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
本文為大家介紹下如何為使用js為鼠標添加右擊事件防止默認的右擊菜單彈出，感興趣的朋友可以參考下，希望對大家有所幫助2013-07-07
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹了electron-builder打包配置詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟，很好的搭檔，下面小編給大家全面解析JavaScript中apply和call以及bind的相關知識，感興趣的朋友一起學習吧2016-06-06
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單...2007-05-05
這篇文章主要為大家詳細介紹了Bootstrap基本布局實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
下面小編就為大家?guī)硪黄P于js中的鼠標事件總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文主要介紹了js獲取數(shù)組對象中的全部key和value值，主要使用JavaScript的?map()?函數(shù)和?values()?迭代器來實現(xiàn)取出數(shù)組對象的所有key值和value值，感興趣的可以了解下2024-01-01
前端很多場景都會涉及到對時間的處理,我所用得最多的庫是moment,下面這篇文章主要給大家介紹了關于如何利用moment處理時間戳并計算時間的差值的相關資料,需要的朋友可以參考下2022-04-04