近日在网上经常看见电子木鱼的案例 
  
  
  
  
  
  ，但都是做的小程序 
  
  
  
  
  
  
 ，本人就突发奇想

 


 


 


 


 


 


，使用css和JavaScript在网页中实现这个功能              。于是便有了这个文章
 
  
 
  
 
  
 
  
 
  
 
  
 
。有细致的讲解 
 
 
 
 
 
 ，也把源码都放在了最后 
   
   
   
   
   
   
 ，没有耐心的小伙伴可以直接去看源码












。

比较重点的是JavaScript代码
 

 

 

 

 

 

，内有注释详解  
  
  
  
  
  
  。

效果展示

目录

效果展示

 一
 

 

 

 

 

 

 ，分析功能

木鱼的功能

附加的功能

二             ，功能的实现

1.木鱼在敲击时候的缩放效果

2.功德+1的效果

3.木鱼敲击的声音效果

附加功能：背景音乐

源码与注释详解

css样式部分：

 html代码：

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下载

写的不好
 

 

 

 

 

 

，请多批评

 

 

 

 

 

 
。