JS实现网页动态标题，卖萌必备~

发布于2016-12-05 / 1294次浏览

逛网页时，无意间发现了个动态的网页标题，很有趣。于是自己也跟风做了一个。其实很简单，运用的是JavaScript的onblur和onfocus函数；

先来个效果图,当窗口失去焦点：

当窗口重新获得焦点：

获得焦点2秒后，重新变成原始网页标题：

代码实现：

<html>

<head> 

<meta charset="utf8"> 

<title>别看了,学习啦！</title>

<script type="text/javascript"> 

// window 失去焦点 

window.onblur = function() { 

document.title='(つ ェ ⊂)我藏好了哦~'; 

};

// window 获得焦点 window.onfocus = function() { 

document.title='(*゜ロ゜)ノ被发现了~'; 

setTimeout("document.title='别看了,学习啦！'",3000); }

</script> 

</head>

<body> 

</body>

</html>

那么,如何在自己的博客上实现这种效果呢？

很简单，找到博客的 header.php,在</title>后面加这么一段JavaScript代码：

<script type="text/javascript"> 

var title=document.title; 

// window 失去焦点 

window.onblur = function() { 

document.title='(つ ェ ⊂)我藏好了哦~';

};

// window 获得焦点 

window.onfocus = function() { 

document.title='(*゜ロ゜)ノ被发现了~'; 

setTimeout("document.title=title",3000); 

}

</script>

最后修改于：2017年1月16日下午9:30

喜欢 0

TAGS: 暂无标签

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。转载请注明出处链接 : JS实现网页动态标题，卖萌必备~

<< 下一篇文章

>> highlight.js实现代码高亮

取消回复

2 条评论

蝉時雨说道: 来自 Google Chrome 62.0.3202.94 in Windows 7

2017-12-14 18:09

希望添加评论自删功能

回复
蝉時雨说道: 来自 Google Chrome 62.0.3202.94 in Windows 7

2017-12-14 18:08

还可以使用 Page Visibility API

const title = {
focus: ‘蝉鸣如雨’,
blur: ‘花宵道中’,
}
handleVisibilityChange = () => {
if (document.hidden) {
document.title = title.blur
} else {
document.title = title.focus
}
}
document.addEventListener(“visibilitychange”, handleVisibilityChange, false)

没错，我是来安利的https://chanshiyu.com/2017/11/07/%E7%BD%91%E7%AB%99%E5%8A%A8%E6%80%81%E6%A0%87%E9%A2%98%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F/#more

回复