今宵酒醒何处?杨柳岸,晓风残月。

标题动态切换

image

这个玩意是从DIYGod的网站里面弄出来的。嗯。

原理

使用了HTML5的Page Visibility API

目前页面可见性API有两个属性,一个事件,如下:

document.hidden: Boolean值,表示当前页面可见还是不可见

document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview

visibilitychange: 当可见状态改变时候触发的事件

上代码喽:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange',
function() {
if (document.hidden) {
//注意把图标的地址换成自己的
$('[rel="shortcut icon"]').attr('href', '/*这里填写图标地址*/');
document.title = '(●—●)喔哟,崩溃啦!';
clearTimeout(titleTime);
} else {
$('[rel="shortcut icon"]').attr('href', '/*这里填写图标地址*/');
document.title = '(/≧▽≦/)咦!又好了!' + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile;
},
2000);
}
});

保存为JS文件在网页中加载就行了!

看官若是觉得不错,就打发点猫粮钱吧