javascript30-1键盘按键交互动画特效

javascript30-1键盘按键交互动画特效
javascript30-1键盘按键交互动画特效_第1张图片


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Drum Kittitle>
  <link rel="stylesheet" href="style.css">
head>
<body>


  <div class="keys">
    <div data-key="65" class="key">
      <kbd>Akbd>
      <span class="sound">clapspan>
    div>
    <div data-key="83" class="key">
      <kbd>Skbd>
      <span class="sound">hihatspan>
    div>
    <div data-key="68" class="key">
      <kbd>Dkbd>
      <span class="sound">kickspan>
    div>
    <div data-key="70" class="key">
      <kbd>Fkbd>
      <span class="sound">openhatspan>
    div>
    <div data-key="71" class="key">
      <kbd>Gkbd>
      <span class="sound">boomspan>
    div>
    <div data-key="72" class="key">
      <kbd>Hkbd>
      <span class="sound">ridespan>
    div>
    <div data-key="74" class="key">
      <kbd>Jkbd>
      <span class="sound">snarespan>
    div>
    <div data-key="75" class="key">
      <kbd>Kkbd>
      <span class="sound">tomspan>
    div>
    <div data-key="76" class="key">
      <kbd>Lkbd>
      <span class="sound">tinkspan>
    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>

<script>
  (function(){
      

    function playHandler(e){
      
        //paly music
        const audio = document.querySelector( `audio[data-key = "${
        e.keyCode}"] `);
        if(audio){
      
          audio.currentTime = 0;
          audio.play();
        }

        //play style
      const dom = document.querySelector( `div[data-key = "${
        e.keyCode}"] `);
       if(dom){
      
        dom.classList.add(`playing`);        
      }
    } 

    function transitionendHandler(e){
      
          if(e.propertyName === 'transform'){
      
              e.currentTarget.classList.remove(`playing`);
          }
        }

    window.addEventListener('keydown',playHandler);

    document.querySelectorAll(`.key`).forEach(function(key){
      
        key.addEventListener('transitionend',transitionendHandler)
      })
  })()
script>


body>
html>

你可能感兴趣的:(js特效,js,css,html)