經常可以看見的title裡面的消息提示,下面是JS的一種實現方法,需要的朋友可以參考下
主要是通過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("【新消息】", "");
// 定時器,設置消息切換頻率閃爍效果就此產生
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>