让网站标题变得可可爱爱

简介: Hello!之前在浏览网页时,发现这样一个效果,就是我在当前网页,网页标题是这样,当我离开这个网页去浏览其他网页时,之前那个网页的标题发生了变化,真的非常的Q爱啊🤣,今天就把这个实现分享给大家,冲压,🚀

1. 文字教学


原理很简单,给根 document 添加 visibilitychange 事件监听,然后根据document.hidden属性值进行判断,它有两个值,false true 当值为true 表示用户离开了咱们的页面,反之还在,利用这个判断对网页的标题进行处理,就是这么简单,当然还可以做其他的处理,比如在视频网站,我们可以根据这个判断当用户离开是,用标题快回来,然后暂停视频的播放。用户的体验更棒了呢!!!,nice 🧐


2. 视频教学


image.png

点击查看原视频链接

网页标题设计以及相关应用(第一个视频呀)


3. 代码


<!DOCTYPE html>
<html lang="en">
<head>
    <title>嘿,你回来了😉</title>
</head>
<body>
    <script>
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                document.title = "你丫的跑啥呢,快回来🥺";
                //暂停视频播放
            } else {
                document.title = "嘿,你回来了😉";
                //视频播放
            }
        }, false);
    </script>
</body>
</html>


相关文章
源文件与模块生成时的文件不同,是否希望调试器使用它?如何解决
源文件与模块生成时的文件不同,是否希望调试器使用它?如何解决
|
11月前
|
网络架构
直通和交叉电缆:网络连接的桥梁
【10月更文挑战第15天】
563 5
|
5月前
|
SQL 存储 关系型数据库
MySQL选错索引了怎么办?
本文探讨了MySQL中因索引选择不当导致查询性能下降的问题。通过创建包含10万行数据的表并插入数据,分析了一条简单SQL语句在不同场景下的执行情况。实验表明,当数据频繁更新时,MySQL可能因统计信息不准确而选错索引,导致全表扫描。文章深入解析了优化器判断扫描行数的机制,指出基数统计误差是主要原因,并提供了通过`analyze table`重新统计索引信息的解决方法。
138 3
|
8月前
|
数据采集 机器学习/深度学习 搜索推荐
Pandas数据应用:推荐系统
在数字化时代,推荐系统是互联网公司的重要组成部分,Pandas作为Python的强大数据分析库,在数据预处理和特征工程中发挥关键作用。常见问题包括缺失值、重复值处理及数据类型转换,解决方案分别为使用`fillna()`、`drop_duplicates()`和`astype()`等函数。常见报错如KeyError、ValueError和MemoryError可通过检查列名、确保数据格式正确及分块读取数据等方式解决。合理运用Pandas工具,可为构建高效推荐系统奠定坚实基础。
169 18
Pandas数据应用:推荐系统
|
8月前
|
Java Go 开发者
2023年终总结-一名23届毕业生的风雨秋招路
人生如巧克力,充满未知。23届大学生经历网课、封校后迎来秋招寒冬,笔者投递三百多家公司,最终收到三个Offer。签约中厂后,享受短暂的轻松时光。热爱编程,参加字节青训营,获技术提升与人脉积累。毕业旅行至云南时突遇毁约,但家人支持下继续前行。重新求职后选择深圳工作,入职半年收获良多。展望2024,立下多个目标,愿新的一年实现愿望。
125 4
|
9月前
|
存储 NoSQL 算法
【C语言】《C语言基础指南!》- 史上最全!
通过上述内容,你可以对 C语言 的基础知识有一个全面的了解。包括程序结构、数据类型、变量和常量、控制结构、函数、数组和字符串、结构体和联合、枚举和联合、预处理器指令、动态内存分配、文件操作、错误处理、编译器选项、调试和优化、C语言的标准库、编程技巧以及编程习惯等方面的详细讲解。希望这些内容能帮助你更好地理解和使用 C语言。
2827 5
|
监控 物联网 数据挖掘
云上智能工厂:重塑制造业的未来生态
云上智能工厂将不断提升智能化水平,包括生产流程的自动化、管理决策的智能化等方面。这将进一步提高生产效率和质量,降低成本和浪费。 绿色可持续发展:随着全球对环保问题的日益关注,云上智能工厂将更加注重绿色生产和可持续发展。通过优化生产流程、更新节能设备等方式降低能耗和排放,实现绿色生产目标。
|
存储 安全 小程序
DaaS架构及落地 (一)
DaaS 数据即服务是一种服务模式,即将数据以服务的形式,向客户提供价值,参与到客户的业务中,它也是软件即服务的一种细分领域。同时DaaS 拥有云计算的通用特点,包括以租代买,按需付费、按用付费。 本文介绍 DaaS 的架构及实现选择,对于拥有大量优质数据资源的企业,可以参考构建起数据业务线,进而实现数据的资产化、价值化。需要说明的是本文中的各种图例仅是逻辑示意,均做了简化。
1421 1
DaaS架构及落地 (一)
|
消息中间件 安全 Java
在Spring Bean中,如何通过Java配置类定义Bean?
【4月更文挑战第30天】在Spring Bean中,如何通过Java配置类定义Bean?
215 1
|
安全 Java 数据库
SpringSecurity系列(二) Spring Security入门
SpringSecurity系列(二) Spring Security入门
213 1