Skip to main content

[JS30] Day 01: JavaScript Drum Kit

keywords: 播放音效, audio, css manipulation, 操作 css, transitionend#

偵測鍵盤按鍵#

利用在 window 上監聽 keydown 事件來偵測使用者按下的按鍵

window.addEventListener('keydown', (e) => {
e.key; // 偵測使用者按下按鍵的字母
e.keycode; // 偵測使用者按下按鍵的鍵碼
});

播放音效(使用<audio>)#

<audio
data-key="65"
src="https://pjchender.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav"
></audio>
const audio = document.querySelector("audio[data-key='65']");
audio.currentTime = 0; // 讓每次回到音效檔的起始點
audio.play(); // 播放元素的音效

為元素增加/移除 class#

利用 el.classList.add/remove/toggle 來為元素添加/移除/切換 class:

const block = document.querySelector('.block');
// 為 block 這個元素添加/移除/切換 active 這個 class
block.classList.add('active');
block.classList.remove('active');
block.classList.toggle('active');

監聽 transitionend#

利用transitionend事件,監聽所有 block 上有 transition 的 CSS 屬性,並且透過 propertyName 來判斷是哪個 css 屬性:

const block = document.querySelector('.block');
// 監聽所有 block 上有 transition 的 CSS 屬性
block.addEventListener('transitionend', (e) => {
console.log(e.propertyName);
});

作品頁面#

Day 1: JavaScript Drum Kit

Last updated on