网站的动态标题

写在最前面

当我们在逛别人网站离开的的时候，标题就会显示成“你别走吖 Σ(っ °Д °;)っ”，当我们回来的时候，又会现实成“(/≧▽≦/)你又回来啦！”这样的效果该怎样实现？

食用方法

食用语言

JavaScript

食用原理

浏览器先获取当前页面的标题(title)；当浏览器识别到用户离开该页面，那么就将该页面的标题设置成“我被你隐藏了”；当用户回来之后就将该页面的标题设置成“我被你找到了”，等待2s(2000ms)后，再将该页面的标题设置成最先获取到的标题，也就是该页面本身的标题。

食用代码

<script>
const thisTitle = document.title;
let titleTime = null;
document.addEventListener('visibilitychange', ()=>{
    if(document.hidden){
        document.title = '我被你隐藏了';
        clearTimeout(titleTime);
    }else{
        document.title = '我被你找到了' ;
        titleTime = setTimeout(function () {
            document.title = thisTitle;
        }, 2000);
    }
});
</script>

如果你把以上代码放在JavaScript文件里，那就使用以下代码在HTML里引入JavaScript文件：

<script type="text/javascript" src="JavaScript文件路径"></script>

总结

整体来说代码还是比较简单的，重点掌握页面的隐藏和显示。