zblog网站如何设置动态标题
时间：2022年05月27日
编辑：佚名
网站如何设置动态标题?
逛别人的网站，经常会看到我们浏览的界面离开访问其他页面的时候，在网页标题栏会显示“你别走鸭，快回来等你哦” 类似这样的字样，当点击会当前页面的时候又会显示“欢迎回来“等等字样，看到这边是不是很神奇呢？应该如何实现呢？其实只需一段JavaScript语句就可以实现了，下面跟大家下分享下如何设置
我们只需在<head></head>头部代码中添加<script type="text/javascript"></script>然后在<script type="text/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)
}
});
PS:代码中的"你别走鸭，快回来等你哦"和"欢迎回来"可自行修改成自己喜欢的标题文字
效果演示
逛别人的网站，经常会看到我们浏览的界面离开访问其他页面的时候，在网页标题栏会显示“你别走鸭，快回来等你哦” 类似这样的字样，当点击会当前页面的时候又会显示“欢迎回来“等等字样，看到这边是不是很神奇呢？应该如何实现呢？其实只需一段JavaScript语句就可以实现了，下面跟大家下分享下如何设置
我们只需在<head></head>头部代码中添加<script type="text/javascript"></script>然后在<script type="text/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)
}
});
PS:代码中的"你别走鸭，快回来等你哦"和"欢迎回来"可自行修改成自己喜欢的标题文字
效果演示
相关文章
猜你需要
