Javascript实现打鼓效果


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了Javascript实现打鼓效果的具体代码,供大家参考,具体内容如下

Javascript实现打鼓效果

按住响应的键盘显示不同的声音

<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>

css部分:

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

第一步实现按下键盘实现,声音的播放

window.addEventListener("keydown",function(e){
   console.log(e.keyCode);
   const audio=document.querySelector(`audio[data-key="${e.keyCode}"]`);
   const key=document.querySelector(`div[data-key="${e.keyCode}"]`)
   //每次播放完初始化
    if (!audio) return;
    audio.currentTime = 0;
    audio.play();

     key.classList.add('playing');

     setTimeout(function(){
     key.classList.remove('playing');
     },70);
    
    //按键之后移出效果
})

keyCode对应图

Javascript实现打鼓效果

Javascript实现打鼓效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
JS实现点击掉落特效
Jan 29 #Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
You might like
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python语言快速上手学习方法
2018/12/14 Python
浅析python的Lambda表达式
2019/02/27 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
根叔历年演讲稿
2014/05/20 职场文书
售后服务承诺书模板
2014/05/21 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2015年父亲节寄语
2015/03/23 职场文书
信仰纪录片观后感
2015/06/08 职场文书
体育教师研修感悟
2015/11/18 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android