JavaScript开源项目JavaScript30-案例day1
| JavaScript Drum Kit 指南 | 纯 JS 模拟敲鼓效果 |
参考：https://github.com/soyaine/JavaScript30
效果：当鼠标移动到对应标签上，产生 style效果和播放对应声音
源码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript30-day1-绑定事件</title> <style> html{ font-size: 10px; background: url("http://ww1.sinaimg.cn/large/007HF978ly1g45cjqu3dkj30xc0m8qih.jpg") no-repeat; background-size: 100%; margin: 0; padding: 0; } .keys{ display: flex; flex: 1; align-items: center; justify-content: center; margin-top: 25%; } .key{ border-radius: 5px; padding: 20px; background: rgba(0,0,0,0.3); border: 4px solid #ffaf62; font-family: sans-serif; text-align: center; color: white; text-shadow: 0 0 5px black; transition: all 0.07s; /*动画过渡时间*/ margin: 10px; } kbd{ display: block; font-size: 40px; } .sound{ font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: yellow; } .playing{ transform: scale(1.1); /*转变尺寸*/ border-color: gold; box-shadow: 0 0 10px gold; } </style> </head> <body> <div class="keys"> <div class="key" data-key="65"> <kbd>A</kbd> <span class="sound">clap</span> </div> <div class="key" data-key="83"> <kbd>S</kbd> <span class="sound">hihat</span> </div> <div class="key" data-key="68"> <kbd>D</kbd> <span class="sound">kick</span> </div> <div class="key" data-key="70"> <kbd>F</kbd> <span class="sound">openhat</span> </div> <div class="key" data-key="71"> <kbd>G</kbd> <span class="sound">boom</span> </div> <div class="key" data-key="72"> <kbd>H</kbd> <span class="sound">ride</span> </div> <div class="key" data-key="74"> <kbd>J</kbd> <span class="sound">snare</span> </div> <div class="key" data-key="75"> <kbd>K</kbd> <span class="sound">tom</span> </div> <div class="key" data-key="76"> <kbd>L</kbd> <span class="sound">tink</span> </div> </div> <audio src="sounds/clap.wav" data-key="65"></audio> <audio src="sounds/hihat.wav" data-key="83"></audio> <audio src="sounds/kick.wav" data-key="68"></audio> <audio src="sounds/openhat.wav" data-key="70"></audio> <audio src="sounds/boom.wav" data-key="71"></audio> <audio src="sounds/ride.wav" data-key="72"></audio> <audio src="sounds/snare.wav" data-key="74"></audio> <audio src="sounds/tom.wav" data-key="75"></audio> <audio src="sounds/tink.wav" data-key="76"></audio> <script> window.onload = function () { const keys = Array.from(document.getElementsByClassName("key")); //// 获取页面所有按钮元素 const audios = keys.forEach(function (value,index,array) { // console.log(value.getAttribute("data-key")); // console.log(typeof value); value.onmouseenter = function () { value.className += ' playing'; audio = document.querySelector(`audio[data-key="${value.getAttribute("data-key")}"]`); audio.currentTime = 0; audio.play(); }; value.onmouseleave = function () { value.setAttribute('class',"key"); }; }) } </script> </body> </html>
补充：[objects].foreach()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>foreach()用法</title> </head> <body> <div class="outer"> <button class="A">A按钮</button> <button class="B">B按钮</button> <button class="C">C按钮</button> <button class="D">D按钮</button> <button class="E">E按钮</button> </div> <script> window.onload = function () { var keys = Array.from(document.querySelectorAll('button')); keys.forEach(key => key.onclick = function(){ console.log(key); //<button class="A">A</button> console.log(`${key.innerHTML}匿名函数的的写法`); //A按钮匿名函数的的写法 }) // window.addEventListener('keydown', playSound); }; </script> </body> </html>
注意：这句字符串拼接，最外层使用的是特殊引号
console.log(`${key.innerHTML}匿名函数的的写法`)