之前分享过"给网站的标签栏添加一个动态标题"的文章,今天又看到一个简单粗暴,觉得很有意思的动态标题,分享给大家。

网站标签页动态标题,会给访问者一种调皮、生动、形象而又不失大气的感觉。

效果展示

2024-04-03T00:44:50.png

该效果展示图为手机端效果

方法1

<!--网站标题自动判断-->
<script>
    var title = document.title;
        function istitle() {
         var isHidden = document.hidden;    
          if (isHidden) {
        //当窗口不可见
        document.title = '(つ ェ ⊂)我藏好了哦~';
          } else {
        //当窗口可见
        document.title = '(*゜ロ゜)ノ被发现了~';
        setTimeout("document.title=title", 3000);
          }
        };
    document.addEventListener('visibilitychange', istitle);
</script>

方法2

<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
    normal_title = document.title;
    document.title = 'w(゚Д゚)w 宝~请不要离开!';
} else document.title = normal_title;
});
</script>
以上两种方法,都可以实现该功能。

将以上其中一种方法复制粘贴到你需要实现这种效果的页面即可。