代码如下
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div class="keys">
        <div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">hihat</span>
        </div>
        <div data-key="68" class="key">
            <kbd>D</kbd>
            <span class="sound">kick</span>
        </div>
        <div data-key="70" class="key">
            <kbd>F</kbd>
            <span class="sound">openhat</span>
        </div>
        <div data-key="71" class="key">
            <kbd>G</kbd>
            <span class="sound">boom</span>
        </div>
        <div data-key="72" class="key">
            <kbd>H</kbd>
            <span class="sound">ride</span>
        </div>
        <div data-key="74" class="key">
            <kbd>J</kbd>
            <span class="sound">snare</span>
        </div>
        <div data-key="75" class="key">
            <kbd>K</kbd>
            <span class="sound">tom</span>
        </div>
        <div data-key="76" class="key">
            <kbd>L</kbd>
            <span class="sound">tink</span>
        </div>
    </div>
    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/boom.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>
    <script>
        (function() {
            function removeTransition(event) {
                if (event.propertyName !== 'transform') return; // 过滤其中一种事件
                event.target.classList.remove('playing'); // 移除高亮的样式
            }
            function playSound(event) {
                const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频
                const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素
                if (!audio) return; // 处理无效的按键事件
                // console.log(key)
                key.classList.add('playing'); // 改变样式
                audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
                audio.play(); // 播放相应音效
            }
            const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
            keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
            window.addEventListener('keydown', playSound);
        })();
    </script>
</body>
</html>
 
音频文件可自行在网上寻找~~或加我QQ 1262060219 记得备注，谢谢

原生 JavaScript30 练习 Day 1 (原生JS控制键盘模拟击鼓)的更多相关文章

  1. 原生JS实现队结构及利用队列模拟‘击鼓传花’游戏

    1. 前言 队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqu ...

  2. 【前端】js代码模拟用户键盘鼠标输入

    js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...

  3. js怎么模拟点击网页元素

    在测试页面中,引入jquery源文件,并添加一个div标签,一个a标签,为了演示效果a标签暂时不添加地址 通过jquery为div标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...

  4. Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）

    在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发,使用Cordova的话基本上就不需要在写系统原生代码了,只要通过编写html页面和js方法即可. 但在有些特殊情况下,还是是需要htm ...

  5. 完全原生javascript简约日历插件，js、html

    效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...

  6. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. 原生aspx页面如何引用公共js和css

    项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...

  8. wepy - 与原生有什么不同（app.js和app.wpy比较)

    app.js和app.wpy有什么不同呢? 答.app.wpy单文件包含了app.wxss\app.js\app.json\app.wxml app.js App({ /** * 当小程序初始化完成时 ...

  9. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

  1. luogu P4515 [COCI2009-2010#6] XOR 容斥

    LINK:XOR 一个不常见的容斥套路题. 以往是只求三角形面积的交 现在需要求被奇数次覆盖的区域的面积. 打住 求三角形面积的交我也不会写 不过这道题的三角形非常特殊 等腰直角 且直角点都在左下方 ...

  2. luogu P1526 [NOI2003]智破连环阵 搜索+最大匹配+剪枝

    LINK:智破连环阵 考试的时候 题意没理解清楚 题目是指一个炸弹爆炸时间结束后再放另一个炸弹 而放完一个炸弹紧接另一个炸弹.题目中存在然后二字. 这样我们可以发现某个炸弹只会炸连续的一段. 但是 由 ...

  3. 精通python网络爬虫PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取书籍提取码:yc9w

  4. hibernate数据库连接池，常用配置

    <!-- 最大连接数 --> <property name="hibernate.c3p0.max_size">20</property> &l ...

  5. springboot 使用mybatis-generator自动生成代码

    这里只介绍mybatis generator生成代码 一.pom配置 在build-->plugins-->添加plugin <plugin> <groupId>o ...

  6. 查看 Linux 系统服务的 5 大方法

    Linux 系统服务有时也称为守护程序,是在Linux启动时自动加载并在Linux退出时自动停止的系统任务. 在本文中,良许将为大家介绍如何列出 Linux 系统里所有运行的服务,以及如何检查某个服务 ...

  7. 她娇羞道“不用这样细致认真的说啊~~”———详细图解在Linux环境中创建运行C程序

    她娇羞说,不用这样细致认真的说啊———详细图解在Linux环境中创建运行C程序“不,这是对学习的负责”我认真说到 叮叮叮,停车,让我们看看如何在Linux虚拟机环境中,创建运行C程序 详细图解在Lin ...

  8. Springboot+swagger2.7集成开发

    Springboot+swagger2.7集成开发 本篇文章是介绍最新的springboot和swagger2.7集成开发和2.0稍微有一些出入: Springboot集成环境配置 Swagger2. ...

  9. Pytorch_第八篇_深度学习 (DeepLearning) 基础 [4]---欠拟合、过拟合与正则化

    深度学习 (DeepLearning) 基础 [4]---欠拟合.过拟合与正则化 Introduce 在上一篇"深度学习 (DeepLearning) 基础 [3]---梯度下降法" ...

  10. 【av68676164（p54)】段式和段页式虚拟存储

    段式存储管理 进程分段 把进程按逻辑意义划分为多个段,每段有段名,长度不定,进程由多段组成 例:一个具有代码段.数据段和堆栈段的进程 段式内存管理系统的内存分配 以段为的单位装入,每段分配连续的内存 ...