原生js实现架子鼓特效

快来打我* 2022-02-23 07:46 194阅读 0赞

这是代码完成的效果，按下abcd会出现对应的架子鼓音乐的效果。

简单的介绍下代码思路，html和css部分就不多说了。

重要的是js部分。

大致是这样的，

![图片描述][3326461509-58f47f55d9092_articlex]

首先获取到所有的按钮为一个数组，然后遍历整个数组，增加监听函数，如果按钮的其一被按下，就会播放相应的声音。

<script>
            function removeTransition(e) {
    
                if (e.propertyName !== 'transform') return; //如果当前的元素变化的属性名称不是transform，return如果if条件成立的话，return并终止运行，如果条件不成立会运行下一行代码。
                e.target.classList.remove('playing'); //移除每个名playing class
            }
    
            function playsound(e) {
                const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //es5的获取元素的方法并不推荐，并不是说不好，而是es6的办法的却更简单一些，其中使用了es6的模板字符串。
                const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
                if (!audio) return; //同上，if(aduio!=null)=if(!aduio),如果audio不为空的话，同样终止执行，反之会执行下面的代码。
    
    
                key.classList.add('playing'); //添加class名为playing
                audio.currentTime = 0; //播放延迟为0
                audio.play(); //播放函数
            }
    
            const keys = Array.from(document.querySelectorAll('.key')); //获取所有class未key的数组集合
            keys.forEach(function(key) { //这段代码可以改成es6的语法的，key => key.addEventListener('transitionend',removeTransition)
                key.addEventListener('transitionend', removeTransition);
                console.log(key); //为了简单写成es5，监听到每个key执行removeTransition
                //key就是每个keys
            });
            window.addEventListener('keydown', playsound); //addEventListener，监听键盘的动向调用playsound函数
        </script>

最后附上github地址 [http://link.zhihu.com/?target...][http_link.zhihu.com_target...]

[3326461509-58f47f55d9092_articlex]: /images/20220223/6ba872dae2ff40029fe15d540f817074.png
[http_link.zhihu.com_target...]: http://link.zhihu.com/?target=https%3A//github.com/CookaCookieEveryday/-/tree/master/js30/01%2520-%2520JavaScript%2520Drum%2520Kit

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现播放器

播放器 > 目的：可快退、快进、静音、调节声音、全屏、改变当前视频所在位置（以拖动形式和点击进度条的形式）遇到的问题： ① 谷歌浏览器上若用本地视频无法对`...

朴灿烈づ我的快乐病毒、/ 2024年04月20日 09:43/ 0 赞/ 86 阅读

相关学习架子鼓的成本核算

学习架子鼓的成本主要取决于几个方面： 1. 架子鼓：购买架子鼓所需的花费，价格因品牌、质量、大小等因素而异。 2. 教材和乐器配件：教程、书籍、敲击器等辅助工具的花费。

分手后的思念是犯贱/ 2024年03月25日 17:14/ 0 赞/ 46 阅读

相关原生js实现Ajax

一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法： $.ajax({

╰+哭是因爲堅強的太久メ/ 2023年10月18日 10:17/ 0 赞/ 138 阅读

相关 three.js 实现火花特效

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言大家好，这里是 CSS兼WebGL 魔法使——alphardex。上周末刚

梦里梦外;/ 2022年10月12日 12:25/ 0 赞/ 160 阅读

相关 three.js 实现火花特效

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言大家好，这里是 CSS兼WebGL 魔法使——alphardex。上周末刚在原神

- 日理万妓/ 2022年08月31日 11:12/ 0 赞/ 124 阅读

相关 CSS3 + JavaScript原生实现翻转特效

利用CSS3 动画： @keyframes 一个定义动画的属性具体在这里就不详细解释了，想要详细了解的可以访问下面这个网址： http://www.

太过爱你忘了你带给我的痛/ 2022年06月03日 06:07/ 0 赞/ 201 阅读

相关手把手教你用原生js实现轮播图特效

很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中

迷南。/ 2022年05月15日 08:28/ 0 赞/ 246 阅读

相关原生js实现架子鼓特效

这是代码完成的效果，按下abcd会出现对应的架子鼓音乐的效果。简单的介绍下代码思路，html和css部分就不多说了。重要的是js部分。大致是这样的， ![图片描述

快来打我*/ 2022年02月23日 07:46/ 0 赞/ 195 阅读

相关原生JS实现Ajax

> 前言 > > 这篇文章将给大家详细介绍一下，与JQuery对照用原生的js怎么去实现Ajax。 <table style="border:0px so

迷南。/ 2021年09月29日 08:02/ 0 赞/ 436 阅读

相关原生js实现ajax

Ajax的原理：简单来说就是通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。一般来

短命女/ 2021年08月13日 20:32/ 0 赞/ 489 阅读