柠檬酸
1月前来过
00:00/
发布于2016-12-05 / 1007次浏览
逛网页时，无意间发现了个动态的网页标题，很有趣。于是自己也跟风做了一个。其实很简单，运用的是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
希望添加评论自删功能
还可以使用 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