JS实现网页动态标题

发布于 2017-01-14  189 次阅读


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

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

当窗口重新获得焦点: a2

获得焦点2秒后,重新变成原始网页标题:a3


代码实现:

<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> 

以此为傲,以此谋生,以此热爱且不忘初衷。