javascript30天挑战思路整理——第1天JavaScript Drum Kit

javascript30天挑战对于js初学者来说是一个能够有效锻炼原生js能力的项目，该挑战通过30个涉及js\css\html的小项目，对于初学者有很大的借鉴意义。

本篇思路整理站在初学者的角度来剖析，一步一步地展开，手把手地整理代码思路，希望能对新手朋友们有帮助，对笔者本人而言也是一个锻炼逻辑、提高表达能力的机会。

实现效果：键盘按下对应按键，页面中对应按钮发生样式变化，出现声音，键盘d起时，恢复原状

分析步骤：

由效果分析得到，实现这些效果需要两个事件监听，一是键盘按下对应事件keydown后出现声音且键盘样式变化，我们先来完成这个事件。

首先将这个函数命名（playSound），通过模板字符串获取当用户按下键盘时对应的keycode，demo中已经设置好的data-key属性关联了div和audio，所以不用考虑匹配问题。使用if语句来处理无效的按键事件，确保获取的元素有效后，为其添加playing样式。

音频方面为了确保用户每一次按下都是从头开始播放，我们可以利用html dom里面audio.currentTime属性，将其进度设置到0，同时让其播放。

currentTime 属性设置或返回视频播放的当前位置（以秒计）。

当设置该属性时，播放会跳跃到指定的位置。

最后将该事件添加到window上，完成事件。

function playSound(event){
       const key=document.querySelector(`div[data-key="${event.keyCode}"]`);
       const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
       if(!audio) return;
       key.classList.add('playing');
       
       audio.currentTime=0;
       audio.play();
     }

window.addEventListener('keydown',playSound);

其次我们要来完成当这一系列事件完成后的清除事件，因为我们必须保证在playSound函数运作之前必须清除上一次的样式，所以这一事件的代码要写在playSound的前面，这样当程序执行时就可以先清除再显示。

因为在demo中key的样式设置中有利用到transition属性，我们可以采用一个叫transitionend事件，就可以实现在打鼓完成后立刻清除样式，于是我们可以得到一个事件监听的写法，同时为我们的函数起名为removetransition，即addEventListener('transition',removetransition)，接下来只需要完成removetransition函数的编写以及给每一个div绑定事件。

transitionend 事件会在 CSS transition 结束后触发

removetransition函数的编写

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

我们可以通过playing样式包含的属性来判断当前div是不是已经处于被按下后的情况，此时可以利用propertyName属性。我们只需要对比样式.key和.playing中所包含的属性内容(区分key和playing)，找出一项key中有而playing中无的属性，如transform。只要没有playing当中的属性，就不再执行清除样式；如果有该属性，则移除样式。

当发生 transitionevent 时，propertyName 属性返回与过渡关联的 CSS 属性的名称。

此属性是只读的。

给每一个div绑定事件

先获取页面中的div，可以采取简单的for循环进行绑定事件。

const keys=docuemnt.querySelectorAll('.key');
     for(let i=0;i

const keys=Array.from(document.querySelectorAll('.key'));
     keys.forEach(key => {key.addEventListener('transitionend',removetransition)
       
     });