个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

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

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

          逛网页时,无意间发现了个动态的网页标题,很有趣。于是自己也跟风做了一个。其实很简单,运用的是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> 

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

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

2 条评论

  1. qq_avatar 蝉時雨 说道: 来自 Google Chrome 62.0.3202.94 in Windows 7
    2017-12-14 18:09

    希望添加评论自删功能 :cry:

  2. qq_avatar 蝉時雨 说道: 来自 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