我要评论前言
本片文章通过触发键盘事件来触发对应的音乐，而且给页面添加了渐变的active类名，通过触发不同的鼠标事件，然后active类移动来实现按下钢琴键的视觉效果。
关键代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
margin: 100px auto;
width: 900px;
height: 500px;
position: relative;
background: url(./keys.png) no-repeat;
background-size: contain;
}
li {
width: 100px;
height: 440px;
float: left;
}
.active {
background: linear-gradient(to bottom, #ffffff, #333);
opacity: 0.5;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 思路：给li遍历上键盘事件，每个不同的li触发不同的音乐，再通过css添加上渐隐的效果。
var lis = document.queryselectorall('li');
var box = document.queryselector('#box');
// console.log(box, lis);
document.addeventlistener('keydown', function (e) {
e = e || window.event;
var k = e.key;
if (k >= '1' && k <= '9') {
var audio = new audio(`./钢琴9键-mp3/d${k}.mp3`);
audio.play();
for (var i = 0; i < lis.length; i++) {
lis[i].classlist.remove('active');
}
lis[k - 1].classlist.add('active');
}
})
</script>
</body>
</html>页面效果：
总结
到此这篇关于javascript实现通过键盘弹钢琴效果的文章就介绍到这了,更多相关js通过键盘弹钢琴内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论