本文主要是介绍JavaScript实现通过键盘弹钢琴的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本片文章通过触发键盘事件来触发对应的音乐，而且给页面添加了渐变的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实现通过键盘弹钢琴的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
