javaScript30挑战——01架子鼓

20.9-11-25

实现步骤

1. 监听全局的键盘keydown事件
2. 获取对应按键的<div>,<audio>分别添加动画和播放音效
3. 为架子鼓添加动画监听transitioned，动画结束移除styleclassplaying

知识要点

• data-* 自定义数据属性
• Document.querySelector() 返回第一个匹配的元素 可配合data-*使用。例：document.querySelector(audio[data-key="65");
• transitionend event 监听动画的结束，类似的还有tansitionstart,transitioncancl,transitionrun
• audio 音乐标签的play方法和currentTime属性
  • play()播放
  • currentTime当前时间，可用于重置音乐
• keydown event 键盘keydown事件

优化

• 键盘的连按，当按住不放时会引发transitionend的失效，缘由是

  transitionend的响应和keydown混杂致使

  解决办法：keydown事件添加playing类的判断，若是已经添加则移除

  if (divEl.className.includes('playing'))
   	{divEl.classList.remove('playing')}
  复制代码