js实现架子鼓

css

 html {
  font-size: 10px;
  background-size: cover;
}
body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #ffc600;
}

html

<div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>

  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

js

 function removeTransition(e) {

if (e.propertyName !== 'transform') return; //如果当前的元素变化的属性名称不是transform，return如果if条件成立的话，return并终止运行，如果条件不成立会运行下一行代码。
e.target.classList.remove('playing'); //移除每个名playing class
}

function playsound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //es5的获取元素的方法并不推荐，并不是说不好，而是es6的办法的却更简单一些，其中使用了es6的模板字符串。
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return; //同上，if(aduio!=null)=if(!aduio),如果audio不为空的话，同样终止执行，反之会执行下面的代码。


key.classList.add('playing'); //添加class名为playing
audio.currentTime = 0; //播放延迟为0
audio.play(); //播放函数
}

const keys = Array.from(document.querySelectorAll('.key')); //获取所有class未key的数组集合
keys.forEach(function(key) { //这段代码可以改成es6的语法的，key => key.addEventListener('transitionend',removeTransition)
key.addEventListener('transitionend', removeTransition);
console.log(key); //为了简单写成es5，监听到每个key执行removeTransition
//key就是每个keys
});
window.addEventListener('keydown', playsound); //addEventListener，监听键盘的动向调用playsound函数