闲来无事,拜拜电子财神

最近在刷抖音的时候,经常能刷到类似下面这种手机桌面,通过手机小组件功能,搭了一个电子供台。。。

由于最近闲来无事儿,就在想可不可以制作一个类似的网页,功能点有以下这些:

1.类似手机小组件一样的布局

2.点击木鱼一次,可以显示功德加一并且带音效

3.随着功德点击,香炉上方会有烟雾飘散的效果

4.统计不同省份的功德数据

5.心愿墙功能,

于是说干就干,就开始了开发工作;

经过了 2 个下午的忙碌,完成了前三个功能,有了大概的雏形,就是下面这个样子

开发的过程中也遇到了一些问题

1.在手机上连续点击木鱼时,会导致网页放大

在网上找了一些解决办法,设置 meta 属性

无效,在 ios 的浏览器上没有效果

这个方法类似于写个节流函数,不过这样做就没有连续敲击木鱼的快感了,所以也不行。

最后让我找到了一个插件 fastClick.js,完美解决了问题。只要正常引入,然后加入以下代码即可。

javascript 复制代码
if ("addEventListener" in document) {            document.addEventListener(                "DOMContentLoaded",                function () {                    FastClick.attach(document.body);                },                false            );        }

2.播放木鱼音效延迟问题

通过document.createElement('audio')方式创建 audio 组件,代码如下

javascript 复制代码
var audio = document.createElement('audio') //生成一个audio元素
audio.controls = true //这样控件才能显示出来
audio.src = 'xxxxx' //音乐的路径
document.body.appendChild(audio) //把它添加到页面中
audio.play()

声音是能播放出来了,但是延迟很高,点一下木鱼,过几秒钟后才有音效,所以这个方式 pass 了。还有说可以通过AudioContext API 来播放音效,但是看了一下,感觉写起来有些复杂,也 pass 掉了,最后也是找到了一款合适的插件解决了这个问题。

使用方式也是异常简单

ini 复制代码
var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

由于有个功能是敲击木鱼后,页面香炉的位置会生成烟雾,自己不太会写,于是又找到了可以一个模拟烟雾的插件,可以在页面任意位置生成烟雾动画

使用时先创建一个 canvas 标签

bash 复制代码
<canvas id="smoke"></canvas>

然后初始化

javascript 复制代码
let canvas = document.getElementById("smoke");let ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;party = SmokeMachine(ctx, [230, 230, 230]); // 数组里是颜色 rgb 值

点击木鱼一次,创建一次播放动画

javascript 复制代码
party.start();party.addSmoke(    window.innerWidth / 2,    //烟雾生成的位置,x    window.innerHeight * 0.4, //烟雾生成的位置,y    10 //烟雾大小);

至此烟雾效果就完美实现了。

体验url:财神爷.我爱你

没错,是纯中文域名,中国的神仙就要用中文域名。

未完待续......

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js