【JS30系列】Day 01：JavaScript Drum Kit

Wes Bos 的原始專案：JS30 Day01

專案目標：

按下與畫面上對應的鍵盤按鍵時，相應的方框會稍微放大字體
外框會發出黃色光暈
同時撥放音檔

我的解法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


document.addEventListener('keydown', pressKey);
document.addEventListener('keyup', upKey);

function pressKey(e) {
  keyElement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  keyElement.classList.add('playing');
  audioElement = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  audioElement.play();
}

function upKey(e) {
  keyElement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  keyElement.classList.remove('playing');
}

觀念一：鍵盤事件 KeyBoard Event

KeyCode 對照表

e.keyCode：綁定「按下鍵盤按鍵（keydown & keypress）」、「放開鍵盤按鍵（keyup）」等事件監聽，可以獲取按下的鍵盤按鍵的 Unicode 值。
keydown：按下鍵盤（任何的鍵盤按鍵）的那個剎那會觸發此事件
keypress：按下鍵盤（可以輸出文字符號的按鍵）的那個剎那會觸發此事件
keyup：放開鍵盤的那個剎那，會觸發此事件

延伸閱讀：

鍵盤事件keypress 和 keydown、keyup 的用法與區別

比較 keydown, keypress, keyup 的差異

觀念二：data-取值

用 getAttribute() 方法取得 DOM 元素的 data- 屬性

1

<div id="myDiv" data-appid="123" data-myname="Sylvia"></div>

1
2
3


let dataDiv = document.getElementById("myDiv");
console.log(dataDiv.getAttribute("data-appid"));  // 123
console.log(dataDiv.getAttribute("data-myname"));  // Sylvia

用 querySelector() 方法 + 樣板字面值 [data-key="${e.keyCode}"] 取得具有某 data- 屬性的 DOM 元素

1
2


  keyElement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  audioElement = document.querySelector(`audio[data-key="${e.keyCode}"]`);

【JS30系列】Day 01：JavaScript Drum Kit

Wes Bos 的原始專案：JS30 Day01

專案目標：

我的解法：

觀念一：鍵盤事件 KeyBoard Event

觀念二：data-取值

相關內容