JS代码实现浏览器网页标题的离开动态切换

最新推荐文章于 2024-01-18 11:52:44 发布

原创最新推荐文章于 2024-01-18 11:52:44 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Code column 专栏收录该内容

7 篇文章

订阅专栏

该代码片段展示了如何使用JavaScript监听文档的visibilitychange事件，当用户离开网页时，将标题更改为‘╮(╯﹏╰)╭网页崩溃啦！’，返回后1秒恢复原标题‘(/≧▽≦/)咦！又好了！’，增加了互动体验。

简介：

为网站加上一个动态标题
离开网页标题就会变，回来后就会恢复正常

代码：

<script>
//动态标题
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
        },
        1000)
    }
});
</script>