侧边栏壁纸
  • 累计撰写 88 篇文章
  • 累计收到 673 条评论
  • 今日更新 0 篇文章

设置网站动态标题

七年
2021-06-10 / 0 评论 / 119 阅读 / 正在检测是否收录...

前言

我们经常逛别人的网站,有些网站当我们离开该页面浏览其他页面的时候,我们在离开的页面上面会看到比如本站的“♥感谢相遇♥”这样的字样,当我们点回来的时候页面上面会看到”♥感谢陪伴♥”的字样。那么我们如何实现呢?其实很简单,只需一个JS即可实现。

教程开始

以本站Joe主题为例,在主题后台设置—>全局设置—>自定义JS,把下面的代码添加到里面即可实现。

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "♥感谢相遇♥";
        clearTimeout(titleTime)
    } else {
        document.title = "♥感谢陪伴♥" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

注:代码中“♥感谢相遇♥”和“♥感谢陪伴”可自行修改成自己喜欢的标题文字哦~

如果你的网站主题设置没有自定义JS这个框的话,若有自定义头部HTML代码的话,把下面的代码添加到里面也可实现。
或者在首页文件位于“</head>”标签之前添加下面的代码也可以。

<script type="text/javascript">
      /*  动态标题*/
     var OriginTitile = document.title,
      titleTime;
     document.addEventListener("visibilitychange",
     function() {
      if (document.hidden) {
        document.title = "♥感谢相遇♥";
        clearTimeout(titleTime)
    } else {
        document.title = "♥感谢陪伴♥" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
    });
    </script>

效果图

Test
Test

6

七年博客 - 你的专属归

https://www.qin0.cn/
更多精彩文章,按Ctrl+D收藏本站!

评论 (0)

取消
在线人数:1人