【Python全栈-JavaScript】JavaScript30-day1-绑定事件
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>Akbd>
<span class="sound">clapspan>
div>
<div class="key" data-key="83">
<kbd>Skbd>
<span class="sound">hihatspan>
div>
<div class="key" data-key="68">
<kbd>Dkbd>
<span class="sound">kickspan>
div>
<div class="key" data-key="70">
<kbd>Fkbd>
<span class="sound">openhatspan>
div>
<div class="key" data-key="71">
<kbd>Gkbd>
<span class="sound">boomspan>
div>
<div class="key" data-key="72">
<kbd>Hkbd>
<span class="sound">ridespan>
div>
<div class="key" data-key="74">
<kbd>Jkbd>
<span class="sound">snarespan>
div>
<div class="key" data-key="75">
<kbd>Kkbd>
<span class="sound">tomspan>
div>
<div class="key" data-key="76">
<kbd>Lkbd>
<span class="sound">tinkspan>
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); //
console.log(`${key.innerHTML}匿名函数的的写法`); //A按钮匿名函数的的写法
})
// window.addEventListener('keydown', playSound);
};
script>
body>
html>
注意：这句字符串拼接，最外层使用的是特殊引号
console.log(`${key.innerHTML}匿名函数的的写法`)