无用挂件の日记

一种基于JS的页面标题萌化方案

很多页面会设计成在失去焦点后假装崩溃,看起来比较有趣。
以下给出两种代码实现。具体不作注释(这么简单的路数)
(都凌晨了困死了啊啊啊啊)
原理:针对HTML5页面可见性改变事件visibilitychange修改document.title记录集以达到使页面标题变化的目的。

Solution I

说明:此种方案是在页面失去焦点后于原标题前加一段自定义字符,再次得到焦点后恢复。代码逻辑较为简单:)

1
2
3
4
5
6
7
document.addEventListener('visibilitychange',
function(){
var OriginTitle = document.title;
var isHidden = document.hidden;
if (isHidden) {document.title = "o(>﹏<)o "+OriginTitle;
} else {
document.title = OriginTitle;}});

Solution II

说明:(效果见本站)设定了timeout,萌化效果更到位。

1
2
3
4
5
6
7
8
9
10
11
12
13
var OriginTitle=document.title;
var st;
document.addEventListener('visibilitychange',function(){
if(document.hidden){
document.title="|・ω・`)你看不见我……你看不见我……你看不见我……";
clearTimeout(st);
}else{
document.title="_(:3」」还是被发现了w";
st=setTimeout(function(){
document.title=OriginTitle;
},2000);
}
});

Solution III

有程序猿在JQuery框架下写了个I-Miss-You.js,引用该脚本后可以一句话实现效果。
具体参见:Bahlaouane-Hamza/I-Miss-You