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')}
  複製代碼