JS30 Day 1 - Drum Kit 学习笔记

这次，要纪录自己在JS30 DAY的笔记，谢谢!

以下为原始档
https://github.com/87JoJo/01---JavaScript-Drum-Kit

首先，我们所要的功能是按下特定字母，能够发出声音并聚焦。

步骤如下:

1. 按下对应键盘会产生声音、改变样式。

首先我们需要一个键盘按下的事件，并放入一个playHandler的函数来产生对应声音及样式。

window.addEventListener('keydown', playHandler);

接着，在playHandler里获取对应的声音、及DOM。
由于我们的HTML里，设置的声音及键盘元素如下，含有自定义属性data-...，可以利用自定义属性来储存所需要的资料，此处用来储存键盘的keyCode，...为我们要定义的属性名，且不可为大写字母，也必须是字符串。

    <audio data-key="65" src="sounds/clap.wav"></audio>    <div data-key="65" class="key">      <!-- 专为键盘输入的标籤(inline) -->      <kbd>A</kbd>      <span class="sound">clap</span>    </div>

由于我们所要获取的元素含有属性，因此利用模板字符串(``)方法来写，${}里面塞的就是我们所要的属性
此处来讲讲两种选择器的差别。

querySelector为静态选择器:当初获取为多少，永远就为多少，只要不再取一次，就不会变。
getElementsByTagName为动态选择器:会随着DOM增加或删除做改变。
建议用静态，可避免一些bug。

//   获取对应声音const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);//   获取对应DOMconst dom = document.querySelector(`div[data-key="${e.keyCode}"]`);

而在播放声音的部分，如果我们想要连续播放，记得在播放时将currentTime = 0;

// 播放声音// 如果想连续播放时间，记得每次播放之前将currentTime设成0if (audio) {  audio.currentTime = 0;  audio.play();}

而改变样式的部分，利用classList增添playing的class以改变样式。

if (dom) {  // 改变样式  dom.classList.add('playing');}

2. 当样式结束时，在移除样式。

因为在css部分有对每个key都进行动画效果，因此我们可利用在事件监听动画结束后，
并将class playing给移除，而playing所执行的样式改变有transform、border-color、box-shadow等属性。

/* 对全部key产生动画效果 */transition: all .07s ease;

在此之前我们需要获取每个class为key的div，并且对每个key都去做动画结束的事件监听。
并且执行transitionHandler的函数来进行playing移入。

const everyDom = document.querySelectorAll('.key');// 对每个key做迴圈处理everyDom.forEach(function(k) {// 对每个key都去做动画结束的事件监听k.addEventListener('transitionend', transitionHandler);});

我们按一下键盘，playing就会触发很多处理(border颜色处理,shadow改变,transform)
获取很多属性如 "box-shadow","border-bottom-color","transform"...

// 但我们只需要propertyName为transform的属性值// 当我们动画处理结束if (e.propertyName === 'transform') {  // currentTarget当前触发事件的目标  // 当我们完成动画以后，就将对应样式移除  e.currentTarget.classList.remove('playing');}