• 欢迎访问高洁博客,我们专注于源码分享!

JS实现网页动态标题

JS特效 高洁 2年前 (2018-06-01) 525次浏览 0个评论

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


 

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



 




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

很简单,找到博客的 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> 

免责声明:本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系。
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址