by 緝熙Soyaine
這是純 JavaScript 系列指南的第一篇
存檔于 GitHub 嫂便，如果覺得有幫助楼吃，請(qǐng)點(diǎn) Star
實(shí)現(xiàn)效果
動(dòng)圖請(qǐng)戳：https://cl.ly/1N1e2q082P20
模擬一個(gè)打鼓的頁面勃救。用戶在鍵盤上按下 ASDFGHJKL 這幾個(gè)鍵時(shí)君编，頁面上與字母對(duì)應(yīng)的按鈕變大變亮干毅，對(duì)應(yīng)的鼓點(diǎn)聲音響起來循未。
關(guān)鍵點(diǎn)
- 鍵盤事件
- 播放聲音
- 改變樣式
步驟分解
-
添加鍵盤事件監(jiān)聽。在 window 上添加鍵盤
keydown事件搏存。 -
對(duì)應(yīng)事件處理程序瑰步。
- 獲取鍵碼
- 用
querySelector獲取元素 - 獲取
data-key為對(duì)應(yīng)鍵碼的元素 - 處理元素。播放音頻祭埂、添加樣式面氓。
-
為所有的
div.key添加transitionened事件。- 獲取所有樣式為
key的元素 - 為其添加事件監(jiān)聽
- 獲取所有樣式為
- 去除樣式的事件處理程序
基礎(chǔ)語法
一些 ES6 語法
const：聲明一個(gè)只讀的常量蛆橡，標(biāo)識(shí)符的值只能賦值一次舌界。-
`字符串 ${ 變量、屬性名 } `：模板字面量（Template literals）中用于表示模板字符串的標(biāo)識(shí)泰演。特點(diǎn)是字符串首尾用反引號(hào)（`）呻拌，內(nèi)部的模板部分用 ${ } 括起來表示，具體請(qǐng)看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，對(duì)其進(jìn)行遍歷時(shí)可采用 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);
})
解決難點(diǎn)
如何將鍵盤按鍵與頁面按鈕對(duì)應(yīng)起來猾普？
連接的幫手是 keydown 事件中的 keyCode 屬性，keyCode 屬性的值和 ASCII 編碼值相同（對(duì)應(yīng)小寫字母）本谜。在這個(gè)網(wǎng)站可以用按鍵盤來查看對(duì)應(yīng)的鍵碼初家。
我們能獲取到的初始頁面中，按鈕 div 和音頻 audio 標(biāo)簽中都添加了一個(gè)屬性 data-key 用于存儲(chǔ)對(duì)應(yīng)的鍵碼，這樣做的目的是溜在，添加鍵盤事件監(jiān)聽后陌知，觸發(fā)鍵盤事件時(shí)即可獲取事件的 keyCode 屬性值，以此為線索掖肋，操作對(duì)應(yīng)的按鈕及音頻仆葡。
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
如何保證按鍵被按住不放時(shí)，可以馬上響起連續(xù)鼓點(diǎn)聲志笼？
每次播放音頻之前沿盅，設(shè)置播放時(shí)間戳為 0：
var audio = document.getElementById("video");
audio.currentTime = 0;
audio.play();
如何使頁面按鈕恢復(fù)原狀？
利用一個(gè)叫 transitionened 的事件纫溃，它在 CSS transition 結(jié)束后會(huì)被觸發(fā)嗡呼。我們就可以利用這個(gè)事件，在每次打鼓的效果（尺寸變大皇耗、顏色變化）完成之后，去除相應(yīng)樣式揍很。
在這個(gè)頁面中郎楼，發(fā)生 transition 的樣式屬性不止一個(gè)（box-shadow, transform, border-color），所以需要添加一個(gè)判斷語句窒悔，使每發(fā)生一次按鍵事件時(shí)呜袁，只去除一次樣式。
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 時(shí)鐘指南
03 用 CSS 變量實(shí)現(xiàn)拖動(dòng)控制 CSS 參數(shù)
