近日在网上经常看见电子木鱼的案例，但都是做的小程序，本人就突发奇想，使用css和JavaScript在网页中实现这个功能。于是便有了这个文章。有细致的讲解，也把源码都放在了最后，没有耐心的小伙伴可以直接去看源码。
比较重点的是JavaScript代码，内有注释详解。
效果展示
一，分析功能
我们先来分析一下实现一个电子木鱼需要什么实现什么功能。
木鱼的功能
首先是木鱼，我们电子木鱼，所有都是围绕这个木鱼来实现功能。
1.在鼠标点击木鱼的时候，木鱼应该有所反应，比如说我们给它来个缩放大小，显示出被敲击的效果。
2.在鼠标敲击木鱼的时候，上面浮现“功德+1”，来给咱们加功德，而且这个“功德+1”有消失的过程。
3.在鼠标敲击木鱼的时候，应该出现敲击木鱼的声音，更加逼真。所以音频文件就必不可少了。
附加的功能
然后是附加的功能，主要是背景音乐。我们添加一首背景音乐，比如说：《大悲咒》，使其自动播放，然后设置一个按钮，可以手动操控背景音乐的播放与暂停。
二，功能的实现
我们先分开讲解，最后组合在一起，使用代码内的注释详解。拆开讲解可能会有些混乱，可以随时拉到最后看代码，代码内的注释可以帮助捋清思路。
1.木鱼在敲击时候的缩放效果
我们使用css中的动画，来实现木鱼的缩放效果。我将木鱼的图片设置为div的背景图片，这样直接对div进行动画的设置就好，比较方便。
@keyframes run {
0% {
transform: scale(1);//缩放
}
50% {
transform: scale(1.2);//缩放1.2倍
}
100% {
transform: scale(1);
}
}
在写好div的样式后，我们在JavaScript中的点击事件中，给div的样式添加这个动画就可以了。
div.style.cssText = 'animation: run 0.5s linear;'
但是这样添加动画后，在点击一次后便会一直执行这个动画。所以我使用了延时定时器，延时去执行清除添加进去的样式，这样缩放效果的动画在执行一次后，马上会被清除。
清除样式的代码：
function qing() {//清除样式使其不可以执行动画
div.style.cssText = ''
p1.style.cssText = ''
}
延时计时器与函数的调用，记得把这行代码写在点击事件里，给div添加样式的后面。
setTimeout(qing, 500)
2.功德+1的效果
木鱼上面浮现的“功德+1”的效果，首先可以用动画来实现向上唯一，并且可以用颜色由透明到白色再到透明，来实现出现和消失的效果（淡入淡出）。
@keyframes yan {
0% {
color: transparent;
}
100% {
color: white;
transform: translate(0px, -100px)
}
}
我们发现在快速点击木鱼的时候，会出现多个“功德+1”，所以一个标签肯定是不够的，所以我们每点击一下就生成一个p标签，执行动画后我们就删除这个p标签。
创建好p标签，我们给这个p标签写入内容，把它的样式用写为我们在css内写好的，类名名为n4的样式。然后添加入它的父元素。
每点击一次木鱼，就生成一个新的p标签。
var p1 = document.createElement('p')//创建一个p标签
p1.innerHTML = '功德+1'
p1.className = 'n4'//这个p标签样式使用classname为n4的
document.body.appendChild(p1)//为父元素添加一个p标签
删除标签。我们点击木鱼的时候生成一个p标签显示“功德+1”，在这个p标签动画结束后，我们就删除它。
先写删除的函数。
function premove(){//清除添加的p标签
document.body.removeChild(p1.querySelector("p"));
}
然后将其添加到点击事件里面。使用延时定时器延迟执行。
setTimeout(premove, 800)
3.木鱼敲击的声音效果
我们为audio设置id为audio_id1，然后使用直接使用document.getElementById获取audio标签。
var video1 = document.getElementById('audio_id')
然后把video1.play();放进点击事件内即可播放敲击木鱼的声音。
因为我的敲木鱼.mp4不是只敲一下，是一个一直敲木鱼的音频。所以我使用一个函数配合延时计时器，使得这个mp4只播放一下敲木鱼的声音后立即停止。
function pause() {//写一个函数，使得木鱼敲的声音结束
video1.pause();
}
将定时器加入到点击事件内。
setTimeout(pause, 100)
这样就可以实现点击一下木鱼，只发出一次敲木鱼的声音的效果。
附加功能：背景音乐
首先我们让背景音乐自动播放。使用controls，autoplay，loop来给是音乐自动播放，循环播放和显示控件。
<audio id="audio_id1" controls autoplay loop src="./1103img/佛教歌曲 - 大悲咒.mp3">大悲咒</audio>
我们再给页面添加按钮，使其操控背景音乐的播放与暂停。
var btn = document.getElementsByTagName('button')[0]
var number = true;
btn.onclick = function () {
if (number === false) {
number = true;
video2.play();
} else {
number = false
video2.pause()
}
}
我们记得给两个audio标签设置visibility: hidden;属性使其隐藏，使得页面更加美观。
源码与注释详解
css样式部分：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
}
html,
body {
background-color: black;
}
body {
width: 100%;
height: 100%;
}
div {
/* margin-top: 100px; */
width: 240px;
height: 201px;
margin: 300px auto;
background-image: url(./1103img/电子木鱼.png);
}
h1 {
color: white;
display: block;
width: 650px;
height: 50px;
margin: 0 auto;
}
p {
display: block;
}
.n4 {
color: transparent;
position: absolute;
top: 300px;
left: 48%;
animation: yan 1s linear
}
#audio_id {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
}
#audio_id1 {
visibility: hidden;
position: absolute;
left: 0;
top: 60px;
}
.btn {
position: absolute;
left: 0px;
top: 120px;
width: 80px;
height: 25px;
}
@keyframes run {//缩放的动画效果
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes yan {//淡入淡出效果
0% {
color: transparent;
}
100% {
color: white;
transform: translate(0px, -100px)
}
}
html代码：
<h1>点击攒功德</h1>
<audio id="audio_id" controls loop src="./1103img/敲击木鱼_耳聆网_[声音ID：19572].wav">木鱼声</audio>
<br>
<audio id="audio_id1" controls autoplay loop src="./1103img/佛教歌曲 - 大悲咒.mp3">大悲咒</audio>
<button class="btn">bgm开关</button>
<div>
</div>
JavaScript代码：
//获取元素部分
var number = true;
var div = document.getElementsByTagName('div')[0]
var video1 = document.getElementById('audio_id')
var video2 = document.getElementById('audio_id1')
var btn = document.getElementsByTagName('button')[0]
//木鱼的点击事件
div.onclick = function () {
//改变div的样式，使其可以执行动画
div.style.cssText = 'animation: run 0.5s linear;'
//添加一个新的节点来显示功德+1
var p1 = document.createElement('p')//创建一个p标签
p1.innerHTML = '功德+1'
p1.className = 'n4'//这个p标签样式使用classname为n4的
document.body.appendChild(p1)//为父元素添加一个p标签
//播放木鱼敲的声音
video1.play();
//调用木鱼声音停止的函数，使用定时器使其延时执行，保证音乐播放只敲一下的声音
setTimeout(pause, 100)
//清除样式的定时器
setTimeout(qing, 500)
//清除添加的p标签
setTimeout(premove, 800)
}
function pause() {//写一个函数，使得木鱼敲的声音结束
video1.pause();
}
function qing() {//清除样式使其不可以执行动画
div.style.cssText = ''
p1.style.cssText = ''
}
function premove(){//清除添加的p标签
document.body.removeChild(p1.querySelector("p"));
}
//为按钮设置点击事件，使其可以开关bgm
btn.onclick = function () {
if (number === false) {
number = true;
video2.play();
} else {
number = false
video2.pause()
}
}
最后，整个资源链接：
电子木鱼网页版.zip(JavaScript+css+html5)-Javascript文档类资源-CSDN下载
写的不好，请多批评。
版权归原作者 啊啊啊啊啊威 所有， 如有侵权，请联系我们删除。