这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解
第一天的挑战是运用js实现一个爵士鼓的效果，通过敲击键盘上不同的按键，发出不同的声音。
下面是实现后的效果图：
Day1效果图
下面我就讲讲我在这个项目中遇到的难点和学会的知识点：
一、playSound()函数
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}
document.querySelector()用于查询匹配指定css选择器的第一个元 素，document.querySelectorAll()是查询匹配的所有元素。本次项目我闹了个笑话，
我以为（）里的就是个普通字符串，于是我就用了单引号''，但调试的时候怎么也达不到想要的效果，然后我就只能去求助度娘，然后发现 String是模板字符串,ES2015新增的符号,模板字符串里面${var}是变量的占位符。例如：
var x = 'a', y = 'b';
var z = `${x,y}`; //'b'
keyCode是键盘上的按键所对应的ascii码，key.classList.add('playing');是向key的class列表中添加一个playing，playing在css中如此定义
.playing {
transform: scale(1.1);//放大到1.1倍
border-color: #ffc600;//变黄色
box-shadow: 0 0 1rem #ffc600;
}
audio.currentTime=0;是为了保证按键被按住不放时，可以马上响起连续鼓点声。
即每次播放音频之前，设置播放时间戳为 0。
二、removeTransition()函数
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
e.target是发生该事件的对象，其实可以用 this来替代
三、添加事件监听
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));//
window.addEventListener('keydown', playSound);//键盘按下的时候触发 playSound()
Array.from()可以将伪数组转化为数组，详情可以看MDN
利用一个叫 transitionened
的事件，它在 CSS transition 结束后会被触发。
以上就是我在day1中学到的知识，这里我参考了soyaine的中文指南
