30练习题 —— 打击鼓效果

代码在下面

HTML 部分

  <!-- 按键部分 -->

      <div class="keys">
         <div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">pig</span>
         </div>

         <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">Dog</span>
         </div>

         <div data-key="68" class="key">
            <kbd>D</kbd>
            <span class="sound">panda</span>
         </div>

         <div data-key="70" class="key">
            <kbd>F</kbd>
            <span class="sound">ostrich</span>
         </div>

         <div data-key="71" class="key">
            <kbd>G</kbd>
            <span class="sound">tiger</span>
         </div>

         <div data-key="72" class="key">
            <kbd>H</kbd>
            <span class="sound">fish</span>
         </div>

         <div data-key="74" class="key">
            <kbd>J</kbd>
            <span class="sound">rat</span>
         </div>

         <div data-key="75" class="key">
            <kbd>K</kbd>
            <span class="sound">sheep</span>
         </div>

         <div data-key="76" class="key">
            <kbd>L</kbd>
            <span class="sound">horse</span>
         </div>

      </div>



      <!-- 声音部分 -->
      <audio data-key="65" src="sounds/1.wav"></audio>
      <audio data-key="83" src="sounds/2.wav"></audio>
      <audio data-key="68" src="sounds/3.wav"></audio>
      <audio data-key="70" src="sounds/4.wav"></audio>
      <audio data-key="71" src="sounds/5.wav"></audio>
      <audio data-key="72" src="sounds/6.wav"></audio>
      <audio data-key="74" src="sounds/7.wav"></audio>
      <audio data-key="75" src="sounds/8.wav"></audio>
      <audio data-key="76" src="sounds/9.wav"></audio>

CSS 部分

         html {
            font-size: 10px;
            background: url('./background.jpg') bottom center;
            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;
         }

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

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

         /* JS引用改变部分 */
         .playing {
            transform: scale(1.1);
            border-color: #ffc600;
            box-shadow: 0 0 1rem #ffc600;
         }

JAVA SCRIPT部分

<script>
         // 3 按键效果转换之后， 恢复到最初的状态
         function removeTransition(e) {
            if (e.propertyName !== 'transform') return;
            e.target.classList.remove('playing');
         }

         // 1 按下按键的时候， 播放对应的声音
         function playSound(e) {
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
            if (!audio) return;
            // 2 按下按键的时候， 改变该按键的显示效果
            key.classList.add('playing');
            audio.currentTime = 0;
            audio.play();
         }

         const keys = Array.from(document.querySelectorAll('.key'));
         keys.forEach(key => key.addEventListener('transitionend', removeTransition));
         window.addEventListener('keydown', playSound);
</script>

这是视频 ​​​​​​JavaScript 30 练习题 30天的js教学视频 手摸手教学，包看包会~进群解锁更多姿势_哔哩哔哩_bilibili