电子木鱼网页版.zip(JavaScript+css+html5)

zhangawei123电子木鱼网页版.zip 7.27MB

资源文件列表:

电子木鱼网页版.zip 大约有7个文件

电子木鱼网页版/
电子木鱼网页版/1103img/
电子木鱼网页版/1103img/佛教歌曲 - 大悲咒.mp3 7.12MB
电子木鱼网页版/1103img/敲击木鱼_耳聆网_[声音ID：19572].wav 5.18KB
电子木鱼网页版/1103img/木鱼.gif 175.47KB
电子木鱼网页版/1103img/电子木鱼.png 16.39KB
电子木鱼网页版/电子木鱼.html 4.4KB

资源介绍:

近日在网上经常看见电子木鱼的案例，但都是做的小程序，本人就突发奇想，使用css和JavaScript在网页中实现这个功能。于是便有了这个资源。本人发的文章里面有细致的讲解与源码，这个是配套的资源。设置了0积分资源获取，欢迎大家下载。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { 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: 100px; 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) } } </style> </head> <body> <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> <script> //获取元素部分 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.style.cssText = 'animation: run 0.5s linear;'//改变div的样式，使其可以执行动画 //添加一个新的节点来显示功德+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) 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(); btn.innerHTML="bgm打开状态" } else { number = false video2.pause() btn.innerHTML="bgm关闭状态" } } </script> </body> </html>