本文实例为大家分享了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实现拖放效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享的是一个拖放的效果,参考的代码,重构以下,加以理解学习。 首先来看效果: 拖动div 拖放状态:未开始 【程序说明】 拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数。然后鼠标移动时再监听d
本文向大家介绍JavaScript实现滑动门效果,包括了JavaScript实现滑动门效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二、实现滑
本文向大家介绍JavaScript实现Excel表格效果,包括了JavaScript实现Excel表格效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现Excel表格效果的具体代码,供大家参考,具体内容如下 一.主要实现: 1.List item 2.输入内容时显示边框 3.鼠标点击文本框以外部分失去焦点 这里是一个样式表和文本,用来生成表格,下面是js代码
本文向大家介绍JavaScript实现手风琴效果,包括了JavaScript实现手风琴效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现手风琴效果的具体代码,供大家参考,具体内容如下 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍javascript图片滑动效果实现,包括了javascript图片滑动效果实现的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: css: js操作: 更多关于滑动效果的专题,请点击下方链接查看: javascript滑
本文向大家介绍javascript实现列表切换效果,包括了javascript实现列表切换效果的使用技巧和注意事项,需要的朋友参考一下 IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1、js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i; 2、匹配index为将要显示的DOM对象 3、