网站如何设置动态标题

温馨提示:这篇文章已超过202天没有更新,请注意相关的内容是否还可用!

逛别人的网站,经常会看到我们浏览的界面离开访问其他页面的时候,在网页标题栏会显示“你别走鸭,快回来等你哦” 类似这样的字样,当点击会当前页面的时候又会显示“欢迎回来“等等字样,看到这边是不是很神奇呢?应该如何实现呢?其实只需一段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)
    }
    });

image.png

PS:代码中的"你别走鸭,快回来等你哦"和"欢迎回来"可自行修改成自己喜欢的标题文字

教学效果演示

image.png

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码