原生js实现架子鼓特效

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

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

重要的是js部分。

大致是这样的，

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

<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...

本文转载于:原生js实现架子鼓特效