网站如何设置动态标题

阿豪运维笔记 03-16 355阅读

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

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

文章版权声明:除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

Zblog如何自定义后台登入地址

网页文字打字机效果插入一段文字(逐字出现循环回退删除)

Flv西瓜播放器(XGPlayer-flv)视频代码如何调用

个人网站如何添加添加时光轴记录页面

友情链接如何自动获取并添加favicon.ico小图标

ThinkPHP3.2的Runtime/Logs目录下产生大量Log文件的解决办法

分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

分享一个抖音超火的2021国庆节国旗头像生成工具

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