by 緝熙Soyaine
這是純 JavaScript 系列指南的第一篇
存檔于 GitHub ，如果覺得有幫助，請點 Star

實現(xiàn)效果

Drum Kit

動圖請戳：https://cl.ly/1N1e2q082P20

模擬一個打鼓的頁面。用戶在鍵盤上按下 ASDFGHJKL 這幾個鍵時，頁面上與字母對應的按鈕變大變亮，對應的鼓點聲音響起來。

關鍵點

1. 鍵盤事件
2. 播放聲音
3. 改變樣式

步驟分解

1. 添加鍵盤事件監(jiān)聽。在 window 上添加鍵盤 keydown 事件。
2. 對應事件處理程序。
   1. 獲取鍵碼
   2. 用 querySelector 獲取元素
   3. 獲取 data-key 為對應鍵碼的元素
   4. 處理元素。播放音頻、添加樣式。
3. 為所有的 div.key 添加 transitionened 事件。
   1. 獲取所有樣式為 key 的元素
   2. 為其添加事件監(jiān)聽
4. 去除樣式的事件處理程序

基礎語法

一些 ES6 語法

1. const ：聲明一個只讀的常量，標識符的值只能賦值一次。

2. `字符串 ${ 變量、屬性名 } `：模板字面量（Template literals）中用于表示模板字符串的標識。特點是字符串首尾用反引號（`），內部的模板部分用 ${ } 括起來表示，具體請看MDN文檔。簡單例子如下：

         var a = 1;
         var b = 2;
         //不用模板的寫法
         console.log("三是" + (a + b) + "不是" + (2 * a + b)); //"三是3不是4"
         //使用模板字符串的寫法
         console.log(`三是${a + b}不是${2 * a + b}`); //"三是3不是4"
   

forEach 與箭頭函數(shù)

使用 document.querySelector 獲取一組符合 CSS 選擇符的元素快照，類型為 NodeList，對其進行遍歷時可采用 forEach 方法。

// Code from http://es6-features.org/#StatementBodies

// ES6
nums.forEach(v => {
    if (v % 5 === 0)
        fives.push(v);
})

// ES5
nums.forEach(function (v) {
    if (v % 5 === 0)
        five.push(v);
})

解決難點

如何將鍵盤按鍵與頁面按鈕對應起來？

連接的幫手是 keydown 事件中的 keyCode 屬性，keyCode 屬性的值和 ASCII 編碼值相同（對應小寫字母）。在這個網(wǎng)站可以用按鍵盤來查看對應的鍵碼。

我們能獲取到的初始頁面中，按鈕 div 和音頻 audio 標簽中都添加了一個屬性 data-key 用于存儲對應的鍵碼，這樣做的目的是，添加鍵盤事件監(jiān)聽后，觸發(fā)鍵盤事件時即可獲取事件的 keyCode 屬性值，以此為線索，操作對應的按鈕及音頻。

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

如何保證按鍵被按住不放時，可以馬上響起連續(xù)鼓點聲？

每次播放音頻之前，設置播放時間戳為 0：

var audio = document.getElementById("video"); 
audio.currentTime = 0;
audio.play();

如何使頁面按鈕恢復原狀？

利用一個叫 transitionened 的事件，它在 CSS transition 結束后會被觸發(fā)。我們就可以利用這個事件，在每次打鼓的效果（尺寸變大、顏色變化）完成之后，去除相應樣式。

在這個頁面中，發(fā)生 transition 的樣式屬性不止一個（box-shadow, transform, border-color），所以需要添加一個判斷語句，使每發(fā)生一次按鍵事件時，只去除一次樣式。

funciton remove(event) {
  if (event.propertyName !== 'border-left-color') return;
  this.classList.remove('playing');
  // event.target.classList.remove('playing');
}

系列目錄
JavaScript30 - 三十天純JS挑戰(zhàn) 中文指南
01 JavaScript Dump Kit 中文指南
02 純 JavaScript+CSS 時鐘指南
03 用 CSS 變量實現(xiàn)拖動控制 CSS 參數(shù)