若图片加载失败,请开启代理或配置 Github Host,还可帮助今后更好的使用 Github 哦
本文最后更新于 2020 年 3 月 29 日,文章已超过 6 个月!内容可能已失效,请自行测试 ~

点击樱花

引入

<script src="https://cdn.jsdelivr.net/gh/fz6m/[email protected]/js/custom/click.min.js"></script>

效果

鼠标点击后有樱花效果,win 10 演示如下(手机也有效):

注意,此 js 挂载到了 onload 上,如果你还有其他的效果也挂载在 onload ,请自行下载该文件,合并两个函数的代码到一起。(比如动态标题效果,一般也挂载到 onload 上)

背景少量樱花

缘由

因为普遍在使用的樱花背景效果花瓣数太多了,一些人不太喜欢。

于是按不同花瓣数量做了几个新的 js ,并提供如下 cdn 形式的引用:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fz6m/[email protected]/js/sakura/sakura-small.js"></script>

以上为少量樱花效果,另提供几个不同数量的文件引用名:

文件名说明
sakura-small.js少量樱花
sakura-half.js樱花相对原效果数量减半
sakura-reduce.js樱花相对原效果减少1/4
sakura-original.js樱花数量不变(原效果)

对于想安静阅读并且保持樱花效果的,这里推荐的是第一种少量 sakura-small.js 或第二种减半 sakura-half.js

效果

可以发现樱花数量明显只有少量了。

动态标题

介绍

所谓动态标题是指当页面切换到其他窗口,即当前页面被隐藏时,标题会发生变化。

就比如这样。

代码

因为大家博客都有这段代码介绍的文章,相信很多人也已经正在使用了,如下:

window.onload = function () {
  let hour = new Date().getHours()
  let str = ''
  if (hour < 6) {
    str = '修仙中……'
  } else if (hour < 9) {
    str = '早上好!'
  } else if (hour < 12) {
    str = '上午好!'
  } else if (hour < 14) {
    str = '中午好!'
  } else if (hour < 17) {
    str = '下午好!'
  } else if (hour < 19) {
    str = '傍晚好!'
  } else if (hour < 22) {
    str = '晚上好!'
  } else {
    str = '夜深了,要早点休息哦!'
  }
 
  function c () {
    document.title = document[a] ? str + '[' + d + ']' : d
  }
 
  let a = document.title
  let b = document.title
  let d = document.title
  typeof document.hidden !== 'undefined' ? (a = 'hidden', b = 'visibilitychange')
    : typeof document.mozHidden !== 'undefined' ? (a = 'mozHidden', b = 'mozvisibilitychange')
    : typeof document.webkitHidden !== 'undefined' && (a = 'webkitHidden', b = 'webkitvisibilitychange')
  typeof document.addEventListener === 'undefined' && typeof document[a] === 'undefined' || document.addEventListener(b, c, !1)
}

还有一种切换会提示崩溃的如下:

var OriginTitile=document.title;
var jiao;
document.addEventListener('visibilitychange',function(){
if(location.href != "https://你的域名/")(document.hidden){
document.title="(つェ⊂)誒呀,網站崩潰了";
clearTimeout(jiao);
}else{
document.title='(*´∇`*) 咦,又好了~ '+OriginTitile;
jiao=setTimeout(function(){
document.title=OriginTitile;
},4000);
}
});

这段是我转载的,并没有在用,如有需要请自取。

注意

前文也提过,这种挂载到全局 onload 上的函数,只能有一个,所以如果需要多个(比如动态标题和点击樱花效果),请自行下载对应的两个效果文件,把函数写在 window.onload 挂载的一个函数内。

灵感

后文转载来自于:Sakura主题美化系列(八)如何设置浏览器动态标题文字


哪有喜欢孤独的人,只是他们不喜欢绝望而已。