JS+CSS让网站嗨起来 博客要被玩坏了！

cpuoe

最开始在陌小雨那就看到了这个功能，觉得挺好玩，但是也没想继续深入。昨天在无主题博客看到他分享了这个功能的代码之后，觉得可以试试。
用了之后，发现他改进之后的代码存在几个缺憾：

①、他加入了随机播放功能，但是多次点击启动，将出现多首歌曲叠加播放BUG(嗨过头了)；
②、这个功能一旦启用，就必须刷新页面来停止，否则得等到歌曲播放完成才会停止“颤抖”；
③、如果用了CDN，那么js会托管到CDN，新增或更改歌曲就变得非常麻烦，因为缓存刷新很蛋疼；
④、启动之后，高潮来得有点慢，15.5s才会看到明显效果（强迫症）。

一、功能改进
我部署了这个功能之后，改进了一下：

①、加入移除机制，当第二次启动功能时，将移除上一次加载内容，从而避免了歌曲叠加播放的窘迫；
②、加入停止函数stopCrazy()，只要执行这个函数就能停止效果，怎么发挥就看你的了；
③、将歌曲赋值数组从js里面分离出来，直接放到页面中，后续只要修改页面代码，就能即时生效；
④、我将15.5s的延迟改成5s，让高潮效果提前，没办法现代人大部分喜欢快节奏。

刚刚无主题博主小武也说了，可以监听整个页面的双击动作来停止效果，提议不错。我考虑将停止函数绑定到鼠标双击、键盘ESC上面，下面开始DIY！
二、功能部署
①、CSS代码

以上css代码保存为hi.css上传到网站即可，然后记住这个css文件的http路径，后面的js中需要填写。
②、主JS代码：

将以上js代码保存为crazy.js或直接添加到网站的其他全局js文章中均可。如果想改回15.5s的延迟，只需要在上述代码中搜索5000，然后改回15500即可。
③、页面JS代码

i. 将第一步中的得到hi.css地址填写到代码中；
ii. 将你喜欢的歌曲上传到网站或七牛空间，然后将歌曲的http地址替换上述代码的【歌曲地址】即可。

Ps：将这个JS代码添加到网站任意位置均可，比如footer或head，不启动功能时，不会造成任何影响，请放心添加！
④、触发按钮
部署完疯癫功能之后，咱们还需要添加一个启动按钮，启动代码示例如下：

<atitle="亲，点我放松一下吧~！(单击启动，双击或ESC停止)"id="hig"href="javascript:void(0);"onclick="hig();"ondblclick="location.reload(true);">点我嗨一下</a>

将以上代码添加到网站的合适位置即可，样式可以进一步DIY一下，比如张戈博客是弄了一个图片启动按钮，放到了网站右下角的滚动条的右侧。
三、文件下载
为了方便部署，笔者特意打包了所有代码和文件，不过要记得修改代码中的CSS和歌曲地址哦！
下载地址：http://pan.baidu.com/s/1hqxgJju
好了，这个功能就分享到这，顺便偷偷说一声，这个功能应该适用任何建站程序，符合html协议即可，一般人我还不告诉他！
                                                                                注：相关网站建设技巧阅读请移步到建站教程频道。