javaScript的一些小项目01-Drum Kit架子鼓

最新推荐文章于 2024-04-27 13:18:52 发布

菜到不会下载软件

最新推荐文章于 2024-04-27 13:18:52 发布

阅读量396

点赞数 1

分类专栏： js小项目文章标签： javascript

本文链接：https://blog.csdn.net/m0_57446284/article/details/124645785

版权

js小项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

01-Drum Kit架子鼓：

说明：

这主要的功能是：

1、当我在键盘上按下相应的按键，他就会发出相应的声音

2、当按下去的时候会有高亮的效果

3、状态需要恢复到原来的状态

主要效果图预览：

主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- data-key是自定义属性 ES5的规范 -->
  <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>

  

<script>
  // 1、按下按键的时候，播放相应的声音
  window.addEventListener('keydown',function(e){
    const audio=document.querySelector(`audio[data-key ="${e.keyCode}"]`)
    const key =document.querySelector(`div[data-key ="${e.keyCode}"]`)
    // 这个写法是为了防止当按下除了键盘值以外的其他按键
    // if(!audio) 的意思就是 if(audio === null)
    if(!audio) return;
    // 这是解决当重复按下一个键后，只发出一次声音的情况
    audio.currentTime =0
    // currentTime 属性设置或返回音频播放的当前位置（以秒计）
    // 当设置该属性时，播放会跳跃到指定的位置。
    audio.play()

    // 2、按下按键的时候，改变该按键的显示效果
    // 添加类
    key.classList.add('playing')
    // 删除类
    // key.classList.remove('playing')
  })

  
  function removePlaying(value){
    if(value.propertyName !== 'transform') return;
    this.classList.remove('playing')
  }
  
  // 3、按键效果转换之后，恢复到最初状态
  const keys=Array.from(document.querySelectorAll('.key'))
  // Array.from()将对象转换为数组
  // console.log(keys instanceof Array);  true
  keys.forEach(key =>{
    key.addEventListener('transitionend',removePlaying)
  })
</script>


</body>
</html>

样式（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;
}

.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;
}

菜到不会下载软件

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javaScript的一些小项目01-Drum Kit架子鼓

01-Drum Kit架子鼓：说明：这主要的功能是：1、当我在键盘上按下相应的按键，他就会发出相应的声音2、当按下去的时候会有高亮的效果3、状态需要恢复到原来的状态主要效果图预览：主要代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS Drum Kit</title> &lt..
复制链接

扫一扫