利用JS實(shí)現(xiàn)瀏覽器的title閃爍
更新時(shí)間:2013年07月08日 09:39:39 作者:
經(jīng)常可以看見(jiàn)的title里面的消息提示,下面是JS的一種實(shí)現(xiàn)方法,需要的朋友可以參考下
主要是通過(guò)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();
// 頁(yè)面加載時(shí)綁定點(diǎn)擊事件,單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點(diǎn)擊頁(yè)面取消消息閃爍提示
</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();
// 頁(yè)面加載時(shí)綁定點(diǎn)擊事件,單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點(diǎn)擊頁(yè)面取消消息閃爍提示
</body>
</html>
您可能感興趣的文章:
- JS CSS制作飽含熱情的鑲邊文字閃爍特效
- AngularJS頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決
- JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果
- js實(shí)現(xiàn)文字閃爍特效的方法
- JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
- JS實(shí)現(xiàn)的網(wǎng)頁(yè)背景閃電閃爍效果代碼
- 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)文章
怎樣用Javascript實(shí)現(xiàn)單例模式
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)單例模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),可以參考下2021-04-04JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組去重的操作步驟與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象(1)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象,對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述,感興趣的小伙伴們可以參考一下2015-12-12JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法
這篇文章主要介紹了JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法,實(shí)例分析了javascript使用object類定義對(duì)象及屬性的用法,需要的朋友可以參考下2015-03-03elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08