位置: IT常识 - 正文

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

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

推荐整理分享电子木鱼网页版(教学+源码带注释)(木鱼的电脑),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:木鱼电商,木鱼软件,电子木鱼网页版源码,电子木鱼网页版网站,电子木鱼网页版链接,电子木鱼网页版网站,电子木鱼网页版网站,电子木鱼网页版链接,内容如对您有帮助,希望把文章链接给更多的朋友!

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

写的不好,请多批评。

本文链接地址:https://www.jiuchutong.com/zhishi/282746.html 转载请保留说明!

上一篇:鸿蒙系统怎么退出纯净模式?鸿蒙系统纯净模式关闭步骤教程(鸿蒙系统怎么退出开发者选项)

下一篇:fsscrctl.exe是什么进程 有什么作用 fsscrctl进程查询(cefres.dll是什么)

  • 网络推广有哪些方法,推广工具有哪些(网络推广有哪些工作岗位)

    网络推广有哪些方法,推广工具有哪些(网络推广有哪些工作岗位)

  • 苹果手机白屏怎么办(苹果手机白屏怎么强制重启)

    苹果手机白屏怎么办(苹果手机白屏怎么强制重启)

  • 荣耀30pro和华为nova7pro的区别(荣耀30pro和华为nova8pro哪个好)

    荣耀30pro和华为nova7pro的区别(荣耀30pro和华为nova8pro哪个好)

  • 华为mate30手机能用5g网络吗(华为mate30手机能用几年)

    华为mate30手机能用5g网络吗(华为mate30手机能用几年)

  • 抖音顶部不显示时间(抖音顶部不显示朋友)

    抖音顶部不显示时间(抖音顶部不显示朋友)

  • aipods一个耳机没反应(为什么airpods一个耳机没有声音)

    aipods一个耳机没反应(为什么airpods一个耳机没有声音)

  • 微信视频小窗口怎么设置(微信视频小窗口怎么调出来)

    微信视频小窗口怎么设置(微信视频小窗口怎么调出来)

  • 天猫方糖插电不开机(天猫方糖能连接电脑吗)

    天猫方糖插电不开机(天猫方糖能连接电脑吗)

  • 淘宝账号不存在是什么原因(淘宝账号不存在但是能买东西是什么原因)

    淘宝账号不存在是什么原因(淘宝账号不存在但是能买东西是什么原因)

  • 云存储架构包括哪些内容(云存储系统架构)

    云存储架构包括哪些内容(云存储系统架构)

  • 手机耳机没标左右怎么分(手机耳机左耳机没声音)

    手机耳机没标左右怎么分(手机耳机左耳机没声音)

  • vivo手机正在优化开不了机怎么办(Vivo手机正在优化是什么意思)

    vivo手机正在优化开不了机怎么办(Vivo手机正在优化是什么意思)

  • pcnmoo是什么手机型号(pcamoo是什么手机型号)

    pcnmoo是什么手机型号(pcamoo是什么手机型号)

  • 魅族17和pro的区别(魅族17和17pro哪个更值得购买)

    魅族17和pro的区别(魅族17和17pro哪个更值得购买)

  • 荣耀10是多少W快充(荣耀10是多少瓦充电)

    荣耀10是多少W快充(荣耀10是多少瓦充电)

  • qq开通情侣空间别人能看到吗(qq开通情侣空间对方能看到仅自己可见)

    qq开通情侣空间别人能看到吗(qq开通情侣空间对方能看到仅自己可见)

  • 同一局域网看不到全部电脑(同一局域网看不到同组电脑怎么办)

    同一局域网看不到全部电脑(同一局域网看不到同组电脑怎么办)

  • 淘宝首单价是什么意思(淘宝首单金额该谁商家支付吗)

    淘宝首单价是什么意思(淘宝首单金额该谁商家支付吗)

  • qq辅助资料验证不通过(QQ辅助资料验证失败怎么办)

    qq辅助资料验证不通过(QQ辅助资料验证失败怎么办)

  • qq2g在线有几种可能(qq2g在线是什么意)

    qq2g在线有几种可能(qq2g在线是什么意)

  • iphone6充电没反应(iphone6充电无反应开不了机)

    iphone6充电没反应(iphone6充电无反应开不了机)

  • airpods反磁是什么意思(airpods反磁坏了怎么修)

    airpods反磁是什么意思(airpods反磁坏了怎么修)

  • 鸿蒙系统是基于安卓吗(鸿蒙系统基于安卓开发的吗)

    鸿蒙系统是基于安卓吗(鸿蒙系统基于安卓开发的吗)

  • 华为nova5主打什么功能(华为nova 5这个手机怎么样值得购买吗)

    华为nova5主打什么功能(华为nova 5这个手机怎么样值得购买吗)

  • 淘宝店铺皇冠代表什么(淘宝店铺皇冠代码怎么弄)

    淘宝店铺皇冠代表什么(淘宝店铺皇冠代码怎么弄)

  • 腾讯视频怎么开启儿童模式(腾讯视频怎么开4k画质)

    腾讯视频怎么开启儿童模式(腾讯视频怎么开4k画质)

  • 虹膜采集是什么(虹膜采集是什么意思)

    虹膜采集是什么(虹膜采集是什么意思)

  • chatGPT之Python API启用上下文管理

    chatGPT之Python API启用上下文管理

  • 明股实债的风险与防范
  • 账簿印花税的计税方法
  • 无票收入在增值税表中填哪
  • 企业所得税减免税额包括哪些
  • 一般纳税人购销合同印花税计税依据
  • 电信充值调账什么意思
  • 纳税总额是否包含增值税进项
  • 个税登记app
  • 进项税有余额但没有余额
  • 承兑汇票转出
  • 小型微利企业减按25%计算应纳税所得额
  • 固定资产的发票
  • 预付账款只有部分开了发票怎么入账
  • 企业购买的原材料确认为资产,这属于会计确认的范畴
  • 非股东可以投资项目吗
  • 报完税后反结账调整主营业务收入可以吗?
  • 预缴税款的附加税可以抵扣吗
  • 佣金发票可以抵扣吗
  • 支付车辆保险费及车船税会计科目
  • 开票软件上怎么抄税
  • 购买债券投资的交易费用
  • 计提减值准备怎么计算?
  • 汇兑差额会计处理
  • 无需支付的款项需要缴税吗
  • 财务科目明细表格模板
  • 给已经注销的公司退款
  • 房租税收怎么算?
  • 不动产融资租赁服务属于租赁服务吗
  • 往来账乱如何处理
  • win7系统为什么没有虚拟光驱
  • linux常见的文本编辑工具有哪些
  • Olehelp.exe - Olehelp是什么进程 有什么用
  • 企业年金基金缴费必须归集到受托财产托管账户
  • 职工医疗保险补交6万与交居民每交300哪个合算?
  • 销售退回会计处理与税务处理
  • 无人驾驶控制方向
  • 用人单位如何缴纳医疗保险
  • 个人转让土地使用权可以开专票吗
  • 股权置换涉税问题
  • 资产负债表利润表和现金流量表
  • vue computed set get
  • transformer中的token
  • 语音语言
  • 上个月成本做多了怎么冲账
  • 一个月可以勾选多少进项税额
  • 油票上没有公司名称可以报么
  • 接手前往年的银行余额不平怎么办?
  • 临时工工资会计科目怎么录
  • switch关键账号教程
  • 综合保税区可以随便进出吗
  • 欠款收不回来了会计分录
  • 公司法人代表可以有几个
  • 企业所得税年报申报时间
  • 固定资产停产需要计提折旧吗
  • 委托代销业务的会计分录
  • 应收账款平账怎么处理
  • 损益类账户属于资产还是负债
  • 虚开发票但是没有成本如何做账?
  • 报关单新版
  • 企业对于发出的货物
  • 新建的企业
  • sql server中千万数量级分页存储过程代码
  • linux 的ll
  • vi修改文件
  • linux的发展
  • 苹果电脑dock栏不见了
  • macbook恢复macos
  • linux bye
  • 苹果mac系统怎么安装pip工具
  • win7蓝屏代码0x0000007e
  • w10怎么usb连接上网
  • cocos2djs
  • nodejs quic
  • python中字典怎么用
  • 蛋疼的生活歌曲
  • 安卓框架是什么怎么用
  • 工信部新车申报目彿
  • 外经证预缴税款网上流程
  • 城镇土地使用税按月还是按年交
  • 进出口备案登记表是哪个部门发的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设