（一）JS Drum Kit

效果

依次按下键盘的ASDFGHJKL键，播放对应的音乐，相应的按钮出现变大的效果

关键点

监听键盘的keydown事件： window.addEventListener("keydown",callback)
高亮样式的添加和移除 ：为div添加样式，div.classList.add("高亮样式")
音乐的播放 ：获取到跟keyCode对应的音乐，利用audio.play()播放

知识点

CSS中的

background-size: cover; 背景图片的处理
flex布局 移动端
vh，rem像素单位 移动端布局
transition transform:scale(1.1) css3新特性
text-shadow
letter-spacing text-transform
自定义属性：data-xxx

Javascript中的

通过为window添加keydown事件获取键盘的keyCode，根据keyCode来获取音乐audio，通过paly()方法，播放音乐；
keyCode值与data-key的值进行比较，相同为对应的元素添加高亮样式，并且播放音乐，元素变大，同时移除其他元素身上的高亮元素
动态的为html元素，添加样式：key.classList.add("样式名")
querySelector获取的对象？原生js对象？
key.classList对象可以获取到对象上面的class类名

ES6的语法

模版字符串

const audio=document.querySelecor(audio[data-key="${e.keyCode}"); // 根据事件对象e的keyCode值，来获取对应的audio音乐

  模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression}

)的占位符。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

// 未使用模版的时候
var a=5,b=10;
console.log("15 is "+(a+b)+"not"+(2*a+b));
// 使用模版字符串
var a=5,b=10;
console.log(15 is $(a+b) not $(2*a+b))

箭头函数

思考

对于这个效果呢，主要的点：事件的监听；