JavaScript30 Day 1

这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解

第一天的挑战是运用js实现一个爵士鼓的效果，通过敲击键盘上不同的按键，发出不同的声音。
下面是实现后的效果图：

Day1效果图

下面我就讲讲我在这个项目中遇到的难点和学会的知识点：

一、playSound()函数

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();
}

document.querySelector()用于查询匹配指定css选择器的第一个元 素，document.querySelectorAll()是查询匹配的所有元素。本次项目我闹了个笑话，
我以为（）里的就是个普通字符串，于是我就用了单引号''，但调试的时候怎么也达不到想要的效果，然后我就只能去求助度娘，然后发现 String是模板字符串,ES2015新增的符号,模板字符串里面${var}是变量的占位符。例如：

var x = 'a', y = 'b';
var z = `${x,y}`; //'b'

keyCode是键盘上的按键所对应的ascii码，key.classList.add('playing');是向key的class列表中添加一个playing，playing在css中如此定义

.playing {
  transform: scale(1.1);//放大到1.1倍
  border-color: #ffc600;//变黄色
  box-shadow: 0 0 1rem #ffc600;
}

audio.currentTime=0;是为了保证按键被按住不放时，可以马上响起连续鼓点声。

即每次播放音频之前，设置播放时间戳为 0。

二、removeTransition()函数

 function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

e.target是发生该事件的对象，其实可以用 this来替代

三、添加事件监听

  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));//
  window.addEventListener('keydown', playSound);//键盘按下的时候触发 playSound()

Array.from()可以将伪数组转化为数组，详情可以看MDN
利用一个叫 transitionened
的事件，它在 CSS transition 结束后会被触发。

---

以上就是我在day1中学到的知识，这里我参考了soyaine的中文指南