前言
前几天在朋友圈看到“敲电子木鱼”的视频，敲一下木鱼就提示“功德 +1”，还带有敲击声和念经的声音，感觉挺有意思的。
心血来潮，捣鼓了一晚上，借助码上掘金实现了这个功能。
展示效果
素材
准备素材如下：
- 木鱼：网上找了一张木鱼的图片，用PS简单处理成黑白的图片。* 敲木鱼音频、念经音频：网上找了素材，简单剪辑了一下。素材存放在服务器上，方便
码上掘金中引入。
代码块
首先，思考一下展示效果。我们点击木鱼，响起"咚"的一声，次数+1。同时，我们可以在木鱼的右上角添加"功德 +1"的文字闪现效果。
点击木鱼，我们需要做的事情有：
- 播放敲木鱼的声音
- 计数+1
- 添加交互效果（提示文字、木鱼动画等）
其中，计数很容易实现，就不赘述了。
在Vue3中，借助 audio 标签引入音频文件，调用.play()方法可以播放音频：
<audio controls ref="audio" class="aud"><source src="https://clemmensen.top/static/muyu.mp3" />
</audio>
<script setup> const audio = ref(null)
function playMuyu() {audio.value.play()
} </script>
提示文字的实现是，当敲击木鱼时，给文字加上tipsActive的类名，该类名带有动画效果，文字会向上移动并消失。
@keyframes textMove {from {top: 20%;opacity: 1;}to {top: 18%;opacity: 0;}
}
具体代码：
<div :class="['tips', { 'tips-active': tipsActive }]">{{tips}}
</div>
<script setup> const tips = ref('功德 +1')
function clickMuyu() {count.value ++ // 计数+1tipsActive.value = truesetTimeout(() => {tipsActive.value = false}, time.value)
} </script>
相似的，给木鱼加上敲击效果，也就是点击会有缩放效果：
@keyframes muyuScale {0% {transform: scale(1);}50% {transform: scale(0.95);}100% {transform: scale(1);}
}
拓展
开始界面
刚开始是直接显示一个木鱼图片，这里我们考虑添加一个自定义的开始界面，包括“Start”按钮和上方的诗词“睡到僧廊响木鱼，庄周蝴蝶两蘧蘧。”。在点击按钮后才进入木鱼图片，并开始播放背景音乐。
背景音乐
点击"Start"时，开始播放背景音乐。背景音乐的播放方法和上面提到的播放音频的方法一致，这里就不赘述了。
提供多种提示文字
右边加上了文字选择功能，可以选择功能、抗疫或Bug，对应的提示文字会跟着改变。
后记
一个简单的小项目，其中需要了解的地方是如何在vue3中使用audio标签引入音频文件。
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
