一个月纯 JS 挑战——JavaScript30（1）——纯 JS 模拟敲鼓效果

首先呢，给大家推荐一个很好的免费的JS学习项目——JavaScript30。

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。
我是跟着github上的一位大神一点一点学习的，他每一个挑战都有详细的注释和讲解，不会学的一头雾水，但是主要还是要自己动手去写代码并且自己复习知识点呀。
附上github地址：https://github.com/soyaine/JavaScript30
JavaScript30目录：
1、纯 JS 模拟敲鼓效果

好啦~下面要开始我们的第一个挑战了

纯 JS 模拟敲鼓效果

页面效果：

需求：用户在键盘上按下 ASDFGHJKL 这几个键时，对应的鼓点声音响起来（有音频文件，对应播放），页面上与字母对应的按钮变大变亮（修改css样式）。

关键的步骤：
1、键盘按下的事件keydown
2、根据按键播放对应的音乐
3、修改css样式
4、去除添加的样式

1、步骤1：键盘按下事件

window.addEventListener('keydown', playSound)

知识点：
1、监听浏览器的键盘按下事件，window.addEventListener(‘keydown’)
第二个参数是，浏览器按下之后触发的事件；
2、注意，这种监听事件写在html文件中script的最下面；

2、步骤2：键盘按下——播放音频&修改css样式

	// 按下键盘的事件
    const playSound = (e) => {
    
      // 获取按键码对应的音频
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
      
      // 获取页面对应按钮 DIV 元素
      const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
      
      if (!audio || !key) return 
		
	  // 添加css样式
      key.classList.add('playing')

      audio.currentTime = 0  // 每次播放之后都使音频播放进度归零
	  // 播放音频
      audio.play()
    }

在键盘按下需要播放音频和修改CSS样式的时候，我们首先根据按下的按键找出是哪一个音频和对应页面上哪一个按钮。
html中将按钮和音频文件用data-key对应起来。

知识点：
1、

2、querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素；
3、querySelectorAll() 方法返回文档中所有匹配CSS选择器的元素；
4、音频播放：audio.play()
5、添加样式——classList

classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

6、这个是一个特殊的点，当我们按键被按住不放的时候，如何想起连续的鼓点声。将audio.currentTime = 0

3、步骤3：键盘按下—— 移除CSS样式

这个点比较难
https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend
利用一个叫 transitionend 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。

const keys = Array.from(document.querySelectorAll('.key'))
 // 添加 transition 事件监听
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

// 移除样式的事件
const removeTransition = (e) => {
  console.log(e);
  // if (e.propertyName !== 'transform') return; // 过滤其中一种事件
  e.target.classList.remove('playing') // 移除高亮的样式
}

知识点
1、Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例；
2、在这个页面中，发生 transition 的样式属性不止一个（box-shadow, transform, border-color），所以需要添加一个判断语句，使每发生一次按键事件时，只去除一次样式。（因此要添加判断的过滤。）
但是注意，这里这个判断过滤会导致一个问题，就是长按一个按键一段时间松开，playing的样式并没有被去掉。注释掉过滤就好了.
这个问题比较奇怪，还没有得到解决，
我看到github上有人提issue。
https://github.com/soyaine/JavaScript30/issues/11

感兴趣的可以自己研究一下，学到知识最重要啦~