摘要：中文指南作者簡介是推出的一個天挑戰(zhàn)。頁面基礎布局標簽定義鍵盤文本說到技術概念上的特殊樣式時，就要提到標簽。主要代碼主要屬性有以下幾個中有一個樣式為，在本案例中，就是，是以中的為參照物，就是。

作者：?liyuechun  
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 1 篇。完整指南在 從零到壹全棧部落。

第一天的練習是用JS制作一個爵士鼓的頁面，通過敲擊鍵盤上不同的字母，會發(fā)出不同的聲音，并且頁面上會伴隨著敲擊的動畫。

效果如下：

想要實現(xiàn)以上效果，大致思路和解決方案如下：

檢測到鍵盤上什么鍵被按下--監(jiān)聽keydown事件

在按鍵被按下的時候，播放音效--audio.play()

在按鍵被按下的同時，播放動畫--Element.classList.add("playing")

在動畫結束后，移除動畫，不然之后再點擊不會有任何效果--Element.classList.remove("playing")

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

`字符串 ${ 變量、屬性名 } `：模板字面量（Template literals）中用于表示模板字符串的標識。特點是字符串首尾用反引號（`），內(nèi)部的模板部分用 ${ } 括起來表示，具體請看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"

使用 document.querySelector 獲取一組符合 CSS 選擇符的元素快照，類型為 NodeList（此對象是對于文檔的實時運行的動態(tài)查詢），對其進行遍歷時可采用 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);
})

  
  
  





  

    

      A
      clap
    
    

      S
      hihat
    
    

      D
      kick
    
    

      F
      openhat
    
    

      G
      boom
    
    

      H
      ride
    
    

      J
      snare
    
    

      K
      tom
    
    

      L
      tink
    
  

  
  
  
  
  
  
  
  
  

  

標簽定義鍵盤文本

說到技術概念上的特殊樣式時，就要提到 標簽。正如你已經(jīng)猜到的，它用來表示文本是從鍵盤上鍵入的。
瀏覽器通常用等寬字體來顯示該標簽中包含的文本。
標簽經(jīng)常用在于計算機相關的文檔和手冊中。例如：

鍵入 quit 來退出程序，或者鍵入 menu 來返回主菜單。

使用 data-* 屬性來嵌入自定義數(shù)據(jù)

頁面里通過data-key將頁面展示的內(nèi)容和audio關聯(lián)起來。使用方法如下介紹：

    
Owl
    
Salmon
 
    
Tarantula
 

① data-* 屬性用于存儲頁面或應用程序的私有自定義數(shù)據(jù)。
② data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
③ 屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
④ 屬性值可以是任意字符串

語法:

屬性值:

html {
  font-size: 10px;
  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
  background-size: cover;
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh; 
  align-items: center;  
  justify-content: center; 
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white; 
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block; 
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #ffc600;
}

主要屬性有以下幾個：

html中有一個樣式為font-size: 10px;，在本案例中，1rem就是10px，rem是以html中的font-size為參照物，1.2rem就是12px。

transform: scale(1.1);--該屬性在鍵盤被點擊時將該元素縮放至原來的1.1倍。

.key{border: .4rem solid black;} .playing{border-color: #ffc600;}--這兩條屬性在按鍵點擊的時候改變邊框顏色。

.key{text-shadow: 0 0 .5rem black;} .playing{box-shadow: 0 0 1rem #ffc600;}--這兩條屬性在按鍵點擊的時候改變陰影的效果

transition: all .07s ease;--定義以上動畫在0.07秒內(nèi)完成。
我們注意到我們定義了.palying類，在按鍵按下的時侯為該元素添加playing類，在結束后移除playing類。

function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;
    
    key.classList.add("playing");
    audio.currentTime = 0;
    audio.play();
}
/**
* 監(jiān)聽頁面的keydown事件，觸發(fā)playAudio函數(shù)。
*/
window.addEventListener("keydown", playSound);

監(jiān)聽頁面的keydown事件，觸發(fā)playAudio函數(shù)。

通過KeyCode檢測我們按下的鍵盤按鈕是哪個按鈕。

A -> 65

B -> 66

C -> 67

D -> 68

E -> 69

F -> 70

G -> 71

H -> 72

I -> 73

J -> 74

K -> 75

L -> 76

M -> 77

N -> 78

O -> 79

P -> 80

Q -> 81

R -> 82

S -> 83

T -> 84

U -> 85

V -> 86

W -> 87

X -> 88

Y -> 89

Z -> 90

http://keycode.info打開這個網(wǎng)站，可以輕松查看鍵盤的按鈕對應的code。

在這里我們用到了ES6的模板字符串，${e.keyCode},可以動態(tài)的將按鍵的Keycode傳過去，以使audio動態(tài)的獲取每一個按鍵綁定的audio。需要注意的是模板字符串一定要使用"`"(Esc下面那個鍵)包裹，而不是雙引號。

我們注意到audio.play();前面一行是audio.currentTime = 0;，這是因為，如果沒有在播放音效前將該音樂重置，會發(fā)生以下情況，當我連續(xù)點擊某一按鍵的時候，只有第一次點擊會響，第二次第三次連續(xù)的點擊可能沒聲音。所以在每一次點擊之前重置音效是很有必要的。

key.classList.add("playing");可以在按鍵點擊的同時為該元素添加playing類，展示小動畫。

if(!audio) return; if(!key) return;因為并不是每一個按鍵都有音效，當用戶點擊了非綁定音效按鍵，及時退出函數(shù)是很好的習慣。

function stopTransition(e) {
    if (e.propertyName !== "transform") return;
    e.target.classList.remove("playing");
}
  
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach(key => key.addEventListener("transitionend",stopTransition));  

監(jiān)聽每一個按鍵元素的transitionend事件，當按鍵元素的動畫結束后會觸發(fā)stopTransition函數(shù)。

首先在stopTransition函數(shù)中可以輸出事件e的內(nèi)容，會輸出該動畫每一步具體的變化，發(fā)現(xiàn)其中會有propertyName屬性，可以通過判斷propertyName等于其中的一個值（例如"transform"），等于該值就移除playing類，也即移除動畫。

在定位元素的時候，可以使用this也可以使用e.target,可以簡單這么理解，this值的是誰出發(fā)了這次事件，也就是key，就等同于事件的目標（e.target）.

連接的幫手是 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}"]`);

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

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

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

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

funciton remove(event) {
  if (event.propertyName !== "transform") return;
  this.classList.remove("playing");
  // event.target.classList.remove("playing");
}

Github Source Code