JavaScript30 - 1.Drum Kit

❤️ javascript30是一系列的视频教程，旨在30天编写30个前端小项目。 这些项目不须要使用其余lib,不须要编译，不须要模板，回归最纯真的JavaScript；

🐶 🐶 🐶

🐚 写在前面： 我是从NodeJs转向前端开发的，而且才半年时间左右，并且这半年更多的是进行React和Angular相关的开发，因此有不少前端基础知识，好比HTML5和CSS3的新特性使用的并很差，经过这个系列的学习，能够更好的掌握基础知识；

项目代码同步更新在男同交友网

项目简介

Drum Kit项目是在相应用户的键盘事件，改变对应的样式和播放不一样的audio，而且在完成后重置样式；

知识点复习（附我学习的连接）

HTML

• <audio>标签 使用 JavaScript 控制Audio对象
• <kdd>标签 用于表示用户输入的标签 MDN-kdd

CSS

• flex布局 一个完整的Flexbox指南， A Complete Guide to Flexbox
• background-size MDN-background-size
• transition MDN-transition
• transform MDN-transform
• letter-spacing MDN-letter-spacing
• rem 移动web适配利器-rem, 了解真实的『REM』手机屏幕适配
• vh: 1vh 等于1/100的视口高度。 7个你可能不认识的CSS单位， 谈谈CSS3的长度单位（vh、vw、rem）

JS

• Element.classList MDN-Element.classList
• document.querySelector(), document.querySelectorAll() [译]你所不了解的querySelector
• transitionend event: transitionend 事件会在 CSS transition 结束后触发 MDN-transitionend
• NodeList.forEach(): 英MDN-NodeList

代码实践

编写html:

这里使用Emmet插件快速编写html代码，感兴趣的朋友能够去了解一下Emmet；

监听键盘事件:

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

  if (!audio) return
  audio.currentTime = 0; // 重置
  audio.play();
  key.classList.add('playing');
}
window.addEventListener('keydown', play);复制代码

监听transitionend事件:

function removeTransition(e) {
  console.log('ee:', e)
  if (e.propertyName !== 'transform') return; // 若是不是transform完成过渡，则忽略
  this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key')
// 这里按我之前的知识，总以为它会错
keys.forEach(key => key.addEventListener('transitionend', removeTransition));复制代码

.playing的样式以下：

.playing {
  transform: scale(1.2);
  border-color: #ffc600;
  box-shadow: 0 0 10px #ffc600;
}复制代码

遇到的坑

你们应该都知道一个类数组（array like）的概念， 上面代码中const keys = document.querySelectorAll('.key') 获得的keys就是一个类数组;

而后我印象中看过不少类数组相关的材料，类数组的定义以下：

• 拥有length属性，其它属性（索引）为非负整数(TO_NUMBER以后);
• 不具备如 push 、 forEach等数组对象具备的方法

那么为何keys是NodeList,明明是类数组，为何有forEach方法？这里先展现俩个截图：

原来NodeList虽然是类数组对象，可是提供了forEach方法，可是中文的文档中却没有更新！

NodeList还提供了keys, values等方法！