JavaScript实现通过键盘弹钢琴的效果实例代码
更新时间：2024年03月12日 11:44:15 作者：shan33__
这篇文章主要给大家介绍了关于JavaScript实现通过键盘弹钢琴效果的相关资料,通过JS代码实现了钢琴键盘的交互效果,文中通过代码介绍的非常详细,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
本片文章通过触发键盘事件来触发对应的音乐，而且给页面添加了渐变的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(?javascript/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通过键盘弹钢琴内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
您可能感兴趣的文章:
相关文章
Javascript延迟执行实现方法(setTimeout)
延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。2010-12-12
这篇文章主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了js+cookies实现悬浮购物车的方法,涉及javascript数值计算与cookie的相关操作技巧,需要的朋友可以参考下2015-05-05
轻松实现HTML和JS之间的转化的代码...2007-09-09
这篇文章主要介绍了JavaScript暂停和继续定时器的方法的相关资料,非常不错，需要的朋友可以参考下2016-07-07
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。这篇文章主要介绍了JavaScript webpack5配置及使用基本介绍2022-09-09
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。2017-12-12
大家都知道Promise解决了回调地狱的问题,“回调地狱”所说的嵌套其实是指异步的嵌套,它带来了两个问题:可读性的问题和信任问题,下面这篇文章主要给大家介绍了关于JS中promise特点与信任问题解决的相关资料,需要的朋友可以参考下2022-06-06
本文给大家总结了几种可以实现英文首字母大写的javascript脚本，另附上一个CSS的实现方法，非常的简单实用，这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
下面小编就为大家带来一篇js中删除数组中的某一元素实例(无下标时)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论