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 相关文章推荐
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
jQuery简单实现日历的方法
May 04 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
js中for in语句的用法讲解
2015/04/24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
使用python加密自己的密码
2015/08/04 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
基于python实现从尾到头打印链表
2019/11/02 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
怎么快速自学python
2020/06/22 Python
给校长的建议书100字
2014/05/16 职场文书
社区班子对照检查材料
2014/08/27 职场文书
文明单位创建材料
2014/12/24 职场文书
大一学生个人总结
2015/02/15 职场文书
八年级数学教学反思
2016/02/17 职场文书