这是代码完成的效果,按下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...