Vue

js 點擊鍵盤發出聲音

綁定class叫做 key 的值

1
2
const keys = document.querySelectorAll('.key')
console.log(keys.length) //9

綁定keydown 呼叫函式playsound

document.addEventListener（’keydown’, function(e){ … }, false）;
點擊呼叫該函數addEventListener 三考

1
window.addEventListener('keydown', playsound)

keys迴圈

1
2
3
keys.forEach((key) => {
     key.addEventListener('click', removeTransition)
})

data attributes 自訂屬性

透過幫html加上data-*自訂屬性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//函數playsound
function playsound(e) {
  console.log('e',e)
   console.log('e.code',e.code) //"e.code" "KeyF"
   //透過幫html加上data-*自訂屬性
  const key = document.querySelector(`.key[data-key="${e.code}"]`)
  console.log('`.key[data-key="${e.code}"]`',`.key[data-key="${e.code}"]`)//".key[data-key='KeyD']"
  const audio = document.querySelector(`audio[data-key="${e.code}"]`)
  key.classList.add('play')
  //
  audio.currentTime = 0
  audio.play()
}

function removeTransition(e) {
   console.log('e.propertyName',e.propertyName) 
  if (e.propertyName !== 'transform') return
  e.target.classList.remove('play')
}

點擊呼叫該函數addEventListener
addEventListener(transitioned,執行的函式)
audio.currentTime
javascript使用add()、remove()、replace()和toggle()方法來改變元素的外觀
classList add()方法來改變元素的外觀
classList remove()方法來改變元素的外觀
classList toggle()方法來改變元素的外觀
Css顯示與transform scale()