javascript30 練習1
javascript30 練習#1
window.addEventListener("keydown",function(e){ //window增加keydown監聽事件
var dom=document.querySelector(`.key[data-key='${e.keyCode}']`); //抓取物件
var audio=document.querySelector(`audio[data-key='${e.keyCode}']`); //抓取音檔物件
if(!dom||dom.classList.contains("down"))return; //條件未達成 下面程式不跑
dom.classList.add("playing"); //add style
dom.classList.add("down"); //add style
audio.currentTime = 0; //讓起始播放調為零
audio.play(); //音檔撥放
});
var audio=document.querySelectorAll(".key"); //選取所有音檔標籤
audio.forEach((obj)=>obj.addEventListener("transitionend",(e)=>e.target.classList.remove("playing")));
//賦予所有音檔 監聽事件
window.addEventListener("keyup",function(e) //window增加keyup監聽事件
{
var dom=document.querySelector(`.key[data-key='${e.keyCode}']`); //抓取物件
dom&&dom.classList.remove("down"); //remove style
});
所用功能資料:classList arrow function mediaElement EventListenertransitionend
demoJavascript30