CY

使生如夏花之绚烂,死如秋叶之静美

  1. 1. 离开和进入页面时改变 title
    1. 1.1. Document 接口
  2. 2. Copy Or Paste 恶搞
  3. 3. 自定义 log 输出

离开和进入页面时改变 title

利用 Page Visibility,该规范定义了一种用于站点开发人员以编程方式确定页面的当前可见性状态以便开发功率和 CPU 高效的 Web 应用程序的手段。

Document 接口

Document.hidden
如果默认视图中的 文件为空,在获取时,该 hidden 属性必须返回 true。
document.visibilityState:
visibilityState 属性
返回当前视图状态,分别为:
– hidden
– visible
– prerender
– unloaded

visibilitychange 事件

当用户代理确定顶级浏览上下文包含 的文档的可见性 已更改时, 用户代理必须触发文档上的 visibilitychange 事件 。

1
2
3
4
5
6
7
8
9
10
11
var DefaultTitle = document.title
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = '你要去哪裏呢~~~'
} else {
document.title = 'QwQ~~'
setTimeout(function() {
document.title = DefaultTitle
}, 2000)
}
})

Copy Or Paste 恶搞

利用 Window.getSelection clipboardData.setData

原理:监听 copy 事件,获取 Copy 内容,操作剪切板并修改剪切板内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.addEventListener('copy', function(e) {
var word = window.getSelection
? window.getSelection().toString()
: document.selection.createRange().text
if (word.length > 1) {
DiyWord(e)
console.log('商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。')
}
})
function DiyWord(e) {
var clipboardData = e.clipboardData || window.clipboardData
if (clipboardData) {
event.preventDefault()
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var Hello =
'商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。 ->此为粘贴'
//clipboardData.setData('text/html', Hello);
clipboardData.setData('text/plain', Hello)
}
}
//更多有趣的使用姿势自行探索 Ψ( ̄ ∀  ̄)Ψ

自定义 log 输出

1
2
3
4
5
6
7
8
9
10
11
var _log = console.log
console.log = function() {
_log.call(
console,
'%c' + [].slice.call(arguments).join(' '),
'color:transparent;text-shadow:0 0 14px rgba(0,0,0,.8);'
)
}
console.log(
' .. .vr \n qBMBBBMBMY \n 8BBBBBOBMBMv \n iMBMM5vOY:BMBBv \n .r, OBM; .: rBBBBBY \n vUL 7BB .;7. LBMMBBM. \n .@Wwz. :uvir .i:.iLMOMOBM.. \n vv::r; iY. ...rv,@arqiao. \n Li. i: v:.::::7vOBBMBL.. \n ,i7: vSUi, :M7.:.,:u08OP. . \n .N2k5u1ju7,.. BMGiiL7 ,i,i. \n :rLjFYjvjLY7r::. ;v vr... rE8q;.:,, \n 751jSLXPFu5uU@guohezou.,1vjY2E8@Yizero. \n BB:FMu rkM8Eq0PFjF15FZ0Xu15F25uuLuu25Gi. \n ivSvvXL :v58ZOGZXF2UUkFSFkU1u125uUJUUZ, \n :@kevensun. ,iY20GOXSUXkSuS2F5XXkUX5SEv. \n .:i0BMBMBBOOBMUi;, ,;8PkFP5NkPXkFqPEqqkZu. \n .rqMqBBMOMMBMBBBM . @kexianli.S11kFSU5q5 \n .7BBOi1L1MM8BBBOMBB.., 8kqS52XkkU1Uqkk1kUEJ \n .;MBZ;iiMBMBMMOBBBu , 1OkS1F1X5kPP112F51kU \n .rPY OMBMBBBMBB2 ,. rME5SSSFk1XPqFNkSUPZ,.\n ;;JuBML::r:.:.,, SZPX0SXSP5kXGNP15UBr.\n L, :@huhao. :MNZqNXqSqXk2E0PSXPE .\n viLBX.,,v8Bj. i:r7:, 2Zkqq0XXSNN0NOXXSXOU \n :r2. rMBGBMGi .7Y, 1i::i vO0PMNNSXXEqP@Secbone.\n .i1r. .jkY, vE. iY.... 20Fq0q5X5F1S2F22uuv1M; \n '
)

todo more

本文作者 : CY
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://runtua.cn/2018/06/30/Do-something-interesting-with-JS/

本文最后更新于 天前,文中所描述的信息可能已发生改变