00:00/
发布于2016-12-05 / 2054次浏览
逛网页时,无意间发现了个动态的网页标题,很有趣。于是自己也跟风做了一个。其实很简单,运用的是JavaScript的onblur和onfocus函数;
代码实现:
<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