PJCHENder 未整理筆記

[JS30] Day 01: JavaScript Drum Kit

2017-09-26

[JS30] Day 01: JavaScript Drum Kit

@([WesBos] JS30)[JavaScript]

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

偵測鍵盤按鍵

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

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

播放音效(使用<audio>)

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

為元素增加/移除 class

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

1
2
3
4
5
6
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 屬性:

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

作品頁面

Day 1: JavaScript Drum Kit

掃描二維條碼,分享此文章