【JS30】Day01:JavaScript Drum Kit

javascript 30day

目標:按鍵盤按鍵,使畫面有動態效果及聲音。

一、按下鍵盤事件

window.addEventListener('keydown', playSound);
//利用 window 監聽 keydown 事件來偵測使用者按下的按鈕。

二、連結聲音

function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
// 利用 template literals 加入變數,選擇音檔。

const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
// 選擇按鍵

if (!audio) return;
audio.currentTime = 0;
// 每次按鍵重新播放聲音

key.classList.add('playing');
// 加入 css 效果
}

三、事件動畫效果

keys.forEach(key => key.addEventListener('transitionend', removeTransition));
// function 傳入 forEach 遍輪 key , 使每個按鍵監聽 transitionend 事件。

function removeTransition(e) {
if (e.propertyName !== 'transform') return;
// 跳過 CSS transform 屬性

this.classList.remove('playing');
// 移除 css 效果
}

使用技巧

  • forEach
  • template literals
  • arrow function
  • transitionend
【筆記】 如何寫出好註解 【JS30】Day02:CSS + JS Clock

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×