利用JS實現(xiàn)瀏覽器的title閃爍
更新時間：2013年07月08日 09:39:39 作者：
經(jīng)常可以看見的title里面的消息提示，下面是JS的一種實現(xiàn)方法,需要的朋友可以參考下
主要是通過setTimeout方法設置一個定時器，切換消息提示，從而達title到消息提示的閃爍。
<html>
<head>
<title>JS效果-瀏覽器標題欄閃爍</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
// 使用message對象封裝消息
var message = {
time: 0,
title: document.title,
timer: null,
// 顯示新消息提示
show: function () {
var title = message.title.replace("【 】", "").replace("【新消息】", "");
// 定時器，設置消息切換頻率閃爍效果就此產(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();
// 頁面加載時綁定點擊事件，單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點擊頁面取消消息閃爍提示
</body>
</html>
復制代碼 代碼如下:
<html>
<head>
<title>JS效果-瀏覽器標題欄閃爍</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
// 使用message對象封裝消息
var message = {
time: 0,
title: document.title,
timer: null,
// 顯示新消息提示
show: function () {
var title = message.title.replace("【 】", "").replace("【新消息】", "");
// 定時器，設置消息切換頻率閃爍效果就此產(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();
// 頁面加載時綁定點擊事件，單擊取消閃爍提示
function bind() {
document.onclick = function () {
message.clear();
};
}
</script>
</head>
<body>
點擊頁面取消消息閃爍提示
</body>
</html>
相關文章
這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學習設計模式的同學，可以參考下2021-04-04
本文為大家介紹下使用js對輸入框進行限制：文本框只能輸入數(shù)字代碼、只能輸入數(shù)字、只能輸入字母和漢字、只能輸入英文字母和數(shù)字等等，還有很多，感興趣的可以學習下2013-07-07
這篇文章主要介紹了JavaScript基于對象去除數(shù)組重復項的方法,結合實例形式分析了javascript數(shù)組去重的操作步驟與具體實現(xiàn)技巧,需要的朋友可以參考下2016-10-10
詳解JavaScript基于面向對象之創(chuàng)建對象（1）
這篇文章主要介紹了JavaScript基于面向對象之創(chuàng)建對象，對創(chuàng)建對象進行了詳細描述，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript創(chuàng)建一個object對象并操作對象屬性的用法
這篇文章主要介紹了JavaScript創(chuàng)建一個object對象并操作對象屬性的用法,實例分析了javascript使用object類定義對象及屬性的用法,需要的朋友可以參考下2015-03-03
弦圖，是一種表示實體之間相互關系的圖形方法。這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制和弦圖，文中的示例代碼講解詳細，對我們學習D3.js有一定的幫助，需要的可以參考一下2022-11-11
JavaScript之HTMLCollection接口代碼，需要的朋友可以參考下。2011-04-04
elementui更改el-dialog關閉按鈕的圖標d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關閉按鈕的圖標，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要給大家介紹了關于js中復選框的取值及賦值的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了JS設計模式之命令模式概念與用法,簡單描述了命令模式的原理、功能并結合javascript實例形式分析了命令模式相關定義與使用技巧,需要的朋友可以參考下2018-02-02