HTML实时监测页面是否离开并自动更改标题

介绍&代码

在编写网页时候，可以在HTML中编写JavaScript代码，用来检测用户是否离开此网站页面，让网站更有趣。

目录

你可以在页面的<head>标签中加上以下，也可以自行更改提示内容：

<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
    normal_title = document.title;
    document.title = 'w(ﾟДﾟ)w 宝～请不要离开！';
} else document.title = normal_title;
});
</script>

代码解释

这段代码是一个JavaScript脚本，它在文档的可见性发生变化时执行特定的操作。具体来说：

  1. document.addEventListener('visibilitychange', function () { ... });
    • 该行代码用来监听文档的可见性变化事件。当文档的可见性状态发生变化时，就会触发后面传入的匿名函数。
  2. 函数内部的逻辑：
    • 当文档的可见性状态变为 ‘hidden’（即不可见）时，会执行以下操作：
      • 将当前文档的标题保存在 normal_title 变量中。
      • 将文档的标题修改为 ‘w(ﾟДﾟ)w 宝～请不要离开！’，提示用户不要离开当前页面。
    • 若文档的可见性状态不是 ‘hidden’，即可见时，则将标题再次设置为 normal_title，恢复原来的标题。

这段代码的作用是在用户切换到其他窗口或标签时，通过改变页面标题来提醒用户不要离开当前页面，增强页面的吸引力或提醒用户进行某些操作。

Javascript代码实现

使用教程

在后台主题设置—>自定义代码—>自定义 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)
    }
});
//网站动态标题结束

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦！”可自行修改成自己喜欢的标题文字。

THE END
© 版权声明
分享是一种美德，转载请保留原链接