Day27 语法改革！零基础新手也能读懂的JS - JS30-01 Drum Kit

JS30官网
先到上方官网下载试题，今天就来试试看JS30第一天吧!主要是来讲解作者是怎麽撰写的!

这个题目主要做的是按下特定按键的时候会触发声音效果以及CSS并在结束动画後删除CSS样式

我们先来看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>

我们能发现div以及audio都有特定的key value，需要靠这个来抓到特定元素

JS该怎麽做呢?

第一步我们先想一下我们除了按下按钮会触发音乐以及CSS样式
第二步是要让在动画结束的时候删掉CSS样式!
也就是说在transitionend的时候删除样式，keydown的时候播放!

const keys = document.querySelectorAll('.key') //选到所有的按钮
  // 让所有的key监听keyup事件并删除样式
  keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 
  // 在视窗上监听keydown事件并播放
  window.addEventListener('keydown', playSound);

播放音乐

我们先来做按下之後播放并新增playing的class吧!
我们刚刚绑定了视窗keydown事件，会触发playSound function
那我们可以透过这个function选取到我们指定的按键!

我们使用 document.querySelector选取到audio以及div，并透过data-key这个属性来选取到我们按下的按键

Keycode就是每一个键盘按钮的编号!透过这个api可以找寻到是不是我们所指定的按键跟音频，如果没有那就直接不做以下的程序!

  function playSound(e) {
    //透过e.keycode选择音频
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
	//透过e.keycode选择特定按钮
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
	// 没有找到音频就直接return不做!
    if (!audio) return;
	// 直接把选择到的key新增playing这个css style
    key.classList.add('playing');
	// 每次按下就重新reset音频的时间
    audio.currentTime = 0;
	// 播放音频
    audio.play();
  }

我们现在就可以播放搂!但是会发现目前样式还是无法删除，就来解决吧!

删除css样式

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

刚刚有写了如果在动画结束後触发removeTransition()这边使用propertyName 来判断，如果不是动画的就不做，如果是跟动画有关的，那就把那一个按钮的playingCSS删除!

这样就能够达成按下按钮之後触发音频以及CSS样式搂!

今天就讲解到这边，大家明天见!