iT邦幫忙

0

JS30 Day 1 - Drum Kit 學習筆記

這次,要紀錄自己在JS30 DAY的筆記,謝謝!

以下為原始檔
https://github.com/87JoJo/01---JavaScript-Drum-Kit

首先,我們所要的功能是按下特定字母,能夠發出聲音並聚焦。

步驟如下:

1. 按下對應鍵盤會產生聲音、改變樣式。

首先我們需要一個鍵盤按下的事件,並放入一個playHandler的函數來產生對應聲音及樣式。

window.addEventListener('keydown', playHandler);

接著,在playHandler裡獲取對應的聲音、及DOM。
由於我們的HTML裡,設置的聲音及鍵盤元素如下,含有自定義屬性data-...,可以利用自定義屬性來儲存所需要的資料,此處用來儲存鍵盤的keyCode,...為我們要定義的屬性名,且不可為大寫字母,也必須是字符串

    <audio data-key="65" src="sounds/clap.wav"></audio>

    <div data-key="65" class="key">
      <!-- 專為鍵盤輸入的標籤(inline) -->
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>

由於我們所要獲取的元素含有屬性,因此利用模板字符串(``)方法來寫,${}裡面塞的就是我們所要的屬性
此處來講講兩種選擇器的差別。

querySelector為靜態選擇器:當初獲取為多少,永遠就為多少,只要不再取一次,就不會變。
getElementsByTagName為動態選擇器:會隨著DOM增加或刪除做改變。
建議用靜態,可避免一些bug。

//   獲取對應聲音
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

//   獲取對應DOM
const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);

而在播放聲音的部分,如果我們想要連續播放,記得在播放時將currentTime = 0;

// 播放聲音
// 如果想連續播放時間,記得每次播放之前將currentTime設成0
if (audio) {
  audio.currentTime = 0;
  audio.play();
}

而改變樣式的部分,利用classList增添playing的class以改變樣式。

if (dom) {
  // 改變樣式
  dom.classList.add('playing');
}

2. 當樣式結束時,在移除樣式。

因為在css部分有對每個key都進行動畫效果,因此我們可利用在事件監聽動畫結束後,
並將class playing給移除,而playing所執行的樣式改變有transform、border-color、box-shadow等屬性。

/* 對全部key產生動畫效果 */
transition: all .07s ease;

在此之前我們需要獲取每個class為key的div,並且對每個key都去做動畫結束的事件監聽。
並且執行transitionHandler的函數來進行playing移入。

const everyDom = document.querySelectorAll('.key');
// 對每個key做迴圈處理
everyDom.forEach(function(k) {
// 對每個key都去做動畫結束的事件監聽
k.addEventListener('transitionend', transitionHandler);
});

我們按一下鍵盤,playing就會觸發很多處理(border顏色處理,shadow改變,transform)
獲取很多屬性如 "box-shadow","border-bottom-color","transform"...

// 但我們只需要propertyName為transform的屬性值
// 當我們動畫處理結束
if (e.propertyName === 'transform') {
  // currentTarget當前觸發事件的目標
  // 當我們完成動畫以後,就將對應樣式移除
  e.currentTarget.classList.remove('playing');
}

尚未有邦友留言

立即登入留言