利用JS實(shí)現(xiàn)瀏覽器的title閃爍
更新時(shí)間：2013年07月08日 09:39:39 作者：
經(jīng)常可以看見的title里面的消息提示，下面是JS的一種實(shí)現(xiàn)方法,需要的朋友可以參考下
主要是通過setTimeout方法設(shè)置一個(gè)定時(shí)器，切換消息提示，從而達(dá)title到消息提示的閃爍。
<html>
<head>
<title>JS效果-瀏覽器標(biāo)題欄閃爍</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
// 使用message對(duì)象封裝消息
var message = {
time: 0,
title: document.title,
timer: null,
// 顯示新消息提示
show: function () {
var title = message.title.replace("【 】", "").replace("【新消息】", "");
// 定時(shí)器，設(shè)置消息切換頻率閃爍效果就此產(chǎn)生
message.timer = setTimeout(function () {
message.time++;
message.show();
if (message.time % 2 == 0) {
document.title = "【新消息】" + title
}
else {
document.title = "【 】" + title
};
}, 600);
return [message.timer, message.title];
},
// 取消新消息提示
clear: function () {
clearTimeout(message.timer);
document.title = message.title;
}
};
message.show();
// 頁面加載時(shí)綁定點(diǎn)擊事件，單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點(diǎn)擊頁面取消消息閃爍提示
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS效果-瀏覽器標(biāo)題欄閃爍</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
// 使用message對(duì)象封裝消息
var message = {
time: 0,
title: document.title,
timer: null,
// 顯示新消息提示
show: function () {
var title = message.title.replace("【 】", "").replace("【新消息】", "");
// 定時(shí)器，設(shè)置消息切換頻率閃爍效果就此產(chǎn)生
message.timer = setTimeout(function () {
message.time++;
message.show();
if (message.time % 2 == 0) {
document.title = "【新消息】" + title
}
else {
document.title = "【 】" + title
};
}, 600);
return [message.timer, message.title];
},
// 取消新消息提示
clear: function () {
clearTimeout(message.timer);
document.title = message.title;
}
};
message.show();
// 頁面加載時(shí)綁定點(diǎn)擊事件，單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點(diǎn)擊頁面取消消息閃爍提示
</body>
</html>
您可能感興趣的文章:
- JS CSS制作飽含熱情的鑲邊文字閃爍特效
- AngularJS頁面訪問時(shí)出現(xiàn)頁面閃爍問題的解決
- JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果
- js實(shí)現(xiàn)文字閃爍特效的方法
- JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
- JS實(shí)現(xiàn)的網(wǎng)頁背景閃電閃爍效果代碼
- JS實(shí)現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動(dòng)色塊的方法
- js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
- JavaScript 平滑文字閃爍
- 高亮閃爍某個(gè)元素的js腳本
- JS+CSS實(shí)現(xiàn)閃爍字體效果代碼
相關(guān)文章
使用Microsoft Ajax Minifier減小JavaScript文件大小的方法
大家用來減小JavaScript文件下載大小的常見的方式有2種： 壓縮（compression）和縮?。╩inification）。2010-04-04
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問我可不可以用JS和CSS讓頁面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03
bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果
這篇文章主要介紹了bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果，可以自己設(shè)置輪播間隔時(shí)間，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是為了改變函數(shù)體內(nèi)部 this 的指向。下面通過本文重點(diǎn)給大家介紹js中apply，call，bind的巧妙使用方法，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
Javascript模擬加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享
這篇文章主要介紹了Javascript加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享,需要的朋友可以參考下2014-12-12
JavaScript使用遞歸和循環(huán)實(shí)現(xiàn)階乘的實(shí)例代碼
這篇文章主要介紹了JavaScript使用遞歸和循環(huán)實(shí)現(xiàn)階乘的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
火狐下input焦點(diǎn)無法重復(fù)獲取問題的解決方法
input輸入框顯示的時(shí)候，需要自動(dòng)獲取焦點(diǎn)，用focus可以輕松搞定，但在火狐下input無法獲取焦點(diǎn)，下面與大家分享下不錯(cuò)的解決方法2014-06-06
點(diǎn)擊標(biāo)簽切換和自動(dòng)切換DIV選項(xiàng)卡
點(diǎn)擊標(biāo)簽切換DIV的效果，在很多地方都有見到過，而且實(shí)現(xiàn)的方法有很多，本例介紹的這個(gè)可以切換和自動(dòng)切換DIV選項(xiàng)卡2014-08-08
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript觀察者模式與發(fā)布訂閱模式相關(guān)概念、原理2020-05-05