Javascript實(shí)現(xiàn)打鼓效果
本文實(shí)例為大家分享了Javascript實(shí)現(xiàn)打鼓效果的具體代碼,供大家參考,具體內(nèi)容如下
按住響應(yīng)的鍵盤顯示不同的聲音
<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; }
第一步實(shí)現(xiàn)按下鍵盤實(shí)現(xiàn),聲音的播放
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對(duì)應(yīng)圖
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序swiper實(shí)現(xiàn)文字縱向輪播提示效果
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)文字縱向輪播提示效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01用javascript實(shí)現(xiàn)簡單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了用javascript實(shí)現(xiàn)簡單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10基于layPage插件實(shí)現(xiàn)兩種分頁方式淺析
這篇文章主要為大家詳細(xì)介紹了基于layPage插件實(shí)現(xiàn)兩種分頁方式 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對(duì)象的詳細(xì)信息,需要的朋友可以參考下2014-12-12