利用JS实现浏览器的title闪烁
利用JS实现浏览器的title闪烁
发布时间:2016-12-30 来源:查字典编辑
摘要:主要是通过setTimeout方法设置一个定时器,切换消息提示,从而达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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类