对js操作html的实践【1】——实现网页假崩溃吸引网友注意力

前些天逛网站的时候，发现了一些好玩的细节：当网页失去焦点后标题显示网页崩溃，这将使得浏览者重新点回网页。

来自ANOTHERHOME（https://www.anotherhome.net/）与晨旭博客（https://www.chenxublog.com/）的实例

||||||||

（图为ANOTHERHOME）

博主按下了F12……ヽ(￣▽￣)ﾉ发现了这样的代码：

// title变化
        var OriginTitile = document.title;
        var titleTime;
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                $('[rel="shortcut icon"]').attr('href', "//www.anotherhome.net/wp-content/themes/Amativeness/fail.ico");
                document.title = '(●—●)喔哟，崩溃啦！';
                clearTimeout(titleTime);
            } else {
                $('[rel="shortcut icon"]').attr('href', "//www.anotherhome.net/wp-content/themes/Amativeness/favicon.ico");
                document.title = '(/≧▽≦/)咦！又好了！' + OriginTitile;
                titleTime = setTimeout(function () {
                    document.title = OriginTitile;
                }, 2000);
            }
        });
//（来自ANOTHERHOME）

这样的代码：

var OriginTitile=document.title;
var st;
document.addEventListener('visibilitychange',function(){if(document.hidden){document.title="╭(°A°`)╮页面崩溃啦 ";
clearTimeout(st);
//console.log('hide');
}else{document.title="(ฅ>ω<*ฅ) 噫又好了~ "+OriginTitile;
//console.log('show');
st=setTimeout(function(){document.title=OriginTitile;},4000);
//console.log('endChange=');
}
});
//(来自晨旭的博客)

于是啊，就想想想往自己的网站上也添一个这样的功能：我将以晨旭大大的代码为模板加以修改。

1.新建一个html文档

2.写入<script>标签

这一步中，博主实验的时候，发现一个问题：title标签一定要在假崩溃代码之前。

否则：||||||||

将不能实现

document.title="啧啧啧骗你啦 "+OriginTitile;

的预期效果，并且timeout之后标题被改变哦。

细心的童鞋会注意到ANOTHERHOME的源码多了

$('[rel="shortcut icon"]').attr('href', "//www.anotherhome.net/wp-content/themes/Amativeness/fail.ico");

这样一行，这改变了网页的favicon（网页标题左边的小图标）

总结：js可以利用document.title记录集改变网页标题，

document.addEventListener('visibilitychange',function(){if(document.hidden)

将可以侦测网页是否获得焦点。