网站如何设置动态标题

阿豪运维笔记（阿豪同学） 2022-03-16 962阅读

温馨提示：这篇文章已超过318天没有更新，请注意相关的内容是否还可用！

逛别人的网站，经常会看到我们浏览的界面离开访问其他页面的时候，在网页标题栏会显示“你别走鸭，快回来等你哦” 类似这样的字样，当点击会当前页面的时候又会显示“欢迎回来“等等字样，看到这边是不是很神奇呢？应该如何实现呢？其实只需一段JavaScript语句就可以实现了，下面跟大家下分享下如何设置

教学部分

我们只需在<head></head>头部代码中添加<script type="text/javascript"></script>然后在<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)
    }
    });