Neil coding之路

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