0


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

近日在网上经常看见电子木鱼的案例,但都是做的小程序,本人就突发奇想,使用css和JavaScript在网页中实现这个功能。于是便有了这个文章。有细致的讲解,也把源码都放在了最后,没有耐心的小伙伴可以直接去看源码。

比较重点的是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下载

写的不好,请多批评。

标签: html 前端 javascript

本文转载自: https://blog.csdn.net/zhangawei123/article/details/127704302
版权归原作者 啊啊啊啊啊威 所有, 如有侵权,请联系我们删除。

“电子木鱼网页版(教学+源码带注释)”的评论:

还没有评论