JavaScript实现通过键盘弹钢琴的效果

简介: 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>

页面效果:

相关文章
|
1月前
|
JavaScript
|
1月前
|
JavaScript
JS设置键盘快捷键、组合键
JS设置键盘快捷键、组合键
|
11月前
|
存储 JavaScript 算法
重学操作系统----15 | 中断和中断向量:Java/js 等语言为什么可以捕获到键盘输入?
当你拿到一个问题时,需要冷静下来思考和探索解决方案。你可以查资料、看视频或者咨询专家,但是在这之前,你先要进行一定的思考和梳理,有的问题可以直接找到答案,有的问题却需要继续深挖寻找其背后的理论支撑。
145 0
|
11月前
|
JavaScript 前端开发
【js】鼠标禁止右键禁止打开控制台及键盘禁用
前言 大家好,今天和大家分享一下在前端js中禁止鼠标在浏览器中右键,禁止鼠标选中和禁止键盘按键。 这个方法是我在制作一个单词考核系统时所使用到的,因为在考试期间如果打开控制台,通过控制台找到了正确的答案,那么就没有意义了。 所以就需要将控制台禁用,所应用到的也是一些基础的知识,下面我们就一起来看一看吧
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的键盘/文本
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的键盘/文本事件类型,包括输入事件、按键事件和复制/剪切/粘贴事件。
111 0
|
JavaScript API iOS开发
js: 监听键盘按键事件KeyboardEvent
js: 监听键盘按键事件KeyboardEvent
283 0
|
前端开发 JavaScript
利用JavaScript实现键盘控制小方块移动
利用JavaScript实现键盘控制小方块移动 HTML代码: &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; 1 CSS代码: *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } 1 2 3 4 5 6 7 8
|
JavaScript
js: 监听键盘按键事件KeyboardEvent
js: 监听键盘按键事件KeyboardEvent
351 0
js: 监听键盘按键事件KeyboardEvent
|
JavaScript
js 里面的键盘码对应的值
js 里面的键盘码对应的值
113 0
|
JavaScript 前端开发 关系型数据库
JavaScript小游戏,键盘英雄!
该游戏仅供探讨交流。 该游戏可随意传播,请保留声明与出处。 几年前的一个夜晚孤枕难眠,突然来了灵感。创作游戏的初衷是巩固js基础,有朋友问我,为什么取这个名字呢? 可以想象你是电影的主角,打字的速度已达到独孤求败的境界,狂风呼啸电闪雷鸣,键盘声响起,键盘在你指尖灵动肆意纷飞,眨眼的功夫一部20万字撰写完毕。
1105 0