一、html部分文件
<!DOCTYPE html>
<html>
<head>
<title>电子木鱼</title>
<link rel="icon" href="../asset/img/icon.jpg">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1>地狱笑话看多了？快来敲木鱼积攒功德!</h1>
<h2>功德:0</h2>
<div></div>
<audio id="bigsad" src="../asset/audio/大悲咒.mp3"></audio>
<button class="btn">bgm开关</button>
<audio id="qiaomuyu" src="../asset/audio/敲木鱼声.wav"></audio>
<script src="./index.js"></script>
</body>
</html>html较为简单（毕竟也没什么字），主要有三部分，一个是文案，有标题和功德显示，一个是bgm显示，主要有音频的插入和按钮，一个是木鱼的图片，被存放在div标签里。
二、css部分文件
body{
background-color: black;
}
h1,h2{
margin-top: 100px;
color: white;
text-align: center;
}
div{
width: 240px;
height: 201px;
margin: 200px auto;
background-image: url(../asset/img/电子木鱼.png);
}
.btn{
position: absolute;
left: 20px;
top: 700px;
width: 100px;
height: 25px;
}
@keyframes muyu
{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}css部分主要渲染背景为黑色，标题和功德显示居中显示。最重要的是，为木鱼图片添加CSS3中的缩放效果,有一种点击的交互感。
三、js部分文件
//bgm的开关
var btn = document.getElementsByTagName('button')[0];
var flag = false;
var bgm = document.getElementById('bigsad');
btn.onclick = function()
{
if(flag == false)
{
flag = true;
bgm.play();
btn.innerHTML = "bgm打开状态"
}
else
{
flag = false;
bgm.pause();
btn.innerHTML = "bgm关闭状态"
}
}
//木鱼敲击
var i = 1;
var muyu = document.getElementsByTagName('div')[0];
var number = document.getElementsByTagName('h2')[0];
var qiaomuyu = document.getElementById('qiaomuyu');
muyu.onclick = function()
{
muyu.style.cssText = 'animation: muyu 0.5s linear;'
qiaomuyu.play();
setTimeout(qing, 100)
number.innerHTML = "功德:"+ i ;
i++;
}
function qing() {//清除样式使其不可以执行动画
muyu.style.cssText = '';
}首先做bgm开关设置，首先分别获取按钮和音频对象，然后给按钮绑定点击事件，调用函数，用if判断把audio标签对象添加play或pause函数。
然后做木鱼缩放效果，获取div标签和敲击木鱼声音标签对象，给div标签绑定点击事件，在函数中播放缩放动画，敲击声音，清除样式，功德加1的操作。
四、最终展示
