iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

[程式碼&DEMO] [HackMD完整筆記]

目標


按下鍵盤後要播放出相對應的聲音,並同時產生一個特效,按下其他鍵後就會關閉該特效。

步驟流程


STEP1 新增keydown listener
監聽鍵盤按鈕按下。

STEP2 建立playHandler
play sound去播放聲音和DOM style的特效。

STEP3 新增transitionend listener
以css特效結束作監聽。

STEP4 建立function removeClassList
移除'playing'樣式。


學習筆記


getElement 和 querySelector區別

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─

  • querySelector
    • 返回的是一個 Static Node List(靜態)
    • 接收的參數是一個CSS選擇符
  • getElementsBy 系列
    • 返回的是一個 Live Node List(動態)
    • 接收的參數只能是單一的className,tagName和name

ClassList 屬性

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─

DOM裡每個節點上都有一個classList物件。

  1. 可用裡面的方法新增、刪除、修改節點上的CSS。

  2. 也可以用它來判斷某個節點是否被賦予了某個CSS。

    新增類(add)

    鍵盤按鍵觸發時,增加playing這個class。

    //DOM style
    function playHandler(e){
        const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
        if (dom){
          dom.classList.add('playing');
        }
    

    移除類(remove)

    transitionend的時候去remove掉playing這個class。

    function removeClassList(e){
        console.log(e)
        if(e.propertyName === 'transform'){
          e.target.classList.remove('playing')
        }
      }
    

TransitionEvent事件

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
CSS屬性的值從一個值變成另一個值的過程叫做漸變。CSS3 transition系列屬性可控制這個變化過程,使得屬性值變化過程更加平滑。

transitionend

當一個CSS過渡完成時,會出現transitionend事件。

===

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─

   if(e.propertyName === 'transform'){
      e.target.classList.remove('playing')
    }

== 左右兩邊的值相等就回傳true
=== 左右兩邊的值以及type均相等才回傳true


上一篇
[JS30]DAY0 : 發想
下一篇
[JS30]DAY2 : JS and CSS Clock
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30

尚未有邦友留言

立即登入留言