刚才逛一个博客的时候，发现鼠标点击和文本框输入都有挺好看的粒子效果，就研究了一下怎么用

鼠标点击效果

经过不断的尝试（删除），发现控制点击时的粒子效果是靠下面的这个脚本

然后拷贝代码，参考 https://www.niubai.net/944 给自己的博客添加代码就完成了效果

<canvas style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="/wp-content/themes/mdx/js/fireworks.js"></script>

文本框输入效果

和上面一样，很快定位到脚本的位置

同样的操作，拷贝大法！然后...

啥都没有...

然后在源码里看到下面这行，应该是监听input事件，加上就有效果了

<script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script>

同时发现，上面的<canvas>不加也有效果，不过我也不懂JS，不清楚为何

最终就是加上如下代码，实现了粒子效果

<script type="text/javascript" src="/wp-content/themes/mdx/js/fireworks.js"></script>
<script type="text/javascript" src="/wp-content/themes/mdx/js/test.js"></script>
<script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script>

（神奇的是，在后台鼠标点击也有效果Orz)

12/27更新

之前拷贝的鼠标点击代码没有处理窗口的大小变化，导致窗口缩放以后就会出现问题

万幸我在文本框输入特效的js文件里找到了相关代码能处理这个问题

  handleResize() {
  this.renderCanvas.width = this.computerCanvas.width = this.globalWidth = window.innerWidth
  this.renderCanvas.height = this.computerCanvas.height = this.globalHeight = window.innerHeight
  }
  --------------------------------------------------------------
  window.addEventListener('resize', this.handleResize.bind(this))
  // window.addEventListener('mousemove', this.handleMouseMove.bind(this))
  // 还可以为鼠标移动加上粒子特效，还挺炫的，不过太影响观感

还有就是 ctrl + shift + r 可以强制刷新js，因为js等文件会缓存在本地几天，不刷新没效果（一开始还不知道能在浏览器里调试。。然后就新建了好几个js文件来测试。。）

2020/7/27更新

把WordPress更新了一下，效果失效了。。。懒得再搞了。。