让网页标签页的标题动起来 ♪(´▽｀)

发表于2024-04-21|更新于2024-04-21|技术分享

|字数总计:183|阅读时长:1分钟|阅读量:

前言

如你所见，我的博客的浏览器标签页是会动的ヾ(≧ ▽ ≦)ゝ

当处于非活动状态之后标题会改变。

教程

在网页HTML的</head>之前或是</body>之前引入：

<script type="text/javascript" src="/js/title.js"></script>

title.js内容如下：

document.addEventListener("visibilitychange", function () {
    if (document.visibilityState == "hidden") {
        normal_title = document.title;
        let titleState = 0;
        titleInterval = setInterval(() => {
            document.title = titleState == 2 ? " Ciallo~ (∠・ω< )⌒☆!" : titleState == 1 ? "♪~(‾◡◝)  啥时再来看看我 . . ." : normal_title;
            titleState = titleState == 2 ? 0 : titleState + 1;
        }, 8000);
    } else {
        if (titleInterval) {
            clearInterval(titleInterval);
            document.title = normal_title;
        }
    }
});