JavaScript30 - 1.Drum Kit

❤️ javascript30是一系列的視頻教程，旨在30天編寫30個前端小項目。 這些項目不須要使用其餘lib,不須要編譯，不須要模板，迴歸最純真的JavaScript；

🐶 🐶 🐶

🐚 寫在前面： 我是從NodeJs轉向前端開發的，而且才半年時間左右，並且這半年更多的是進行React和Angular相關的開發，因此有不少前端基礎知識，好比HTML5和CSS3的新特性使用的並很差，經過這個系列的學習，能夠更好的掌握基礎知識；

項目代碼同步更新在男同交友網

項目簡介

Drum Kit項目是在相應用戶的鍵盤事件，改變對應的樣式和播放不一樣的audio，而且在完成後重置樣式；

知識點複習（附我學習的連接）

HTML

• <audio>標籤 使用 JavaScript 控制Audio對象
• <kdd>標籤 用於表示用戶輸入的標籤 MDN-kdd

CSS

• flex佈局 一個完整的Flexbox指南， A Complete Guide to Flexbox
• background-size MDN-background-size
• transition MDN-transition
• transform MDN-transform
• letter-spacing MDN-letter-spacing
• rem 移動web適配利器-rem, 瞭解真實的『REM』手機屏幕適配
• vh: 1vh 等於1/100的視口高度。 7個你可能不認識的CSS單位， 談談CSS3的長度單位（vh、vw、rem）

JS

• Element.classList MDN-Element.classList
• document.querySelector(), document.querySelectorAll() [譯]你所不瞭解的querySelector
• transitionend event: transitionend 事件會在 CSS transition 結束後觸發 MDN-transitionend
• NodeList.forEach(): 英MDN-NodeList

代碼實踐

編寫html:

這裏使用Emmet插件快速編寫html代碼，感興趣的朋友能夠去了解一下Emmet；

監聽鍵盤事件:

function play(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)

  if (!audio) return
  audio.currentTime = 0; // 重置
  audio.play();
  key.classList.add('playing');
}
window.addEventListener('keydown', play);複製代碼

監聽transitionend事件:

function removeTransition(e) {
  console.log('ee:', e)
  if (e.propertyName !== 'transform') return; // 若是不是transform完成過渡，則忽略
  this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key')
// 這裏按我之前的知識，總以爲它會錯
keys.forEach(key => key.addEventListener('transitionend', removeTransition));複製代碼

.playing的樣式以下：

.playing {
  transform: scale(1.2);
  border-color: #ffc600;
  box-shadow: 0 0 10px #ffc600;
}複製代碼

遇到的坑

你們應該都知道一個類數組（array like）的概念， 上面代碼中const keys = document.querySelectorAll('.key') 獲得的keys就是一個類數組;

而後我印象中看過不少類數組相關的材料，類數組的定義以下：

• 擁有length屬性，其它屬性（索引）爲非負整數(TO_NUMBER以後);
• 不具備如 push 、 forEach等數組對象具備的方法

那麼爲何keys是NodeList,明明是類數組，爲何有forEach方法？這裏先展現倆個截圖：

原來NodeList雖然是類數組對象，可是提供了forEach方法，可是中文的文檔中卻沒有更新！

NodeList還提供了keys, values等方法！