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