电子木鱼网页版(教学+源码带注释)

近日在网上经常看见电子木鱼的案例，但都是做的小程序，本人就突发奇想，使用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”的效果࿰