代码如下
 
<!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. Blob分析之bottle.hdev

    * 分割读取啤酒瓶子上的数字* bottle.hdev: Segment and read numbers on a beer bottle* 第0步* Step 0: Preparations*定义 ...

  2. 开源后端数据校验插件Validate.Net，类似Validate.js

    介绍 Validate.Net将Validate.js移植到.Net平台,可以更方便.更快捷的校验实体内属性值是否合法.内置多种常规数据校验规则(校验必填.校验字符串长度区间.校验最大最小值.校验值区 ...

  3. AutoMapper 9.0的改造

    AutoMapper于2019.8.12升级9.0 从此不再支持静态的对象转换 自己琢磨了一下,写了一套扩展 官方链接如下 https://github.com/AutoMapper/AutoMapp ...

  4. .net core编写转发服务(三) 接入Polly

    在web服务里面,很常见出现各种问题,需要一些响应的策略,比如服务繁忙的时候,重试,或者重试等待 服务繁忙的时候根据策略即使处理 关于接入Polly我还是沿用之前的代码,继续迭代 Web Api用的是 ...

  5. LINUX --- echo修改GPIO状态

    GPIO sysfs Interface The GPIO sysfs interface allows users to manipulate any GPIO from userspace (al ...

  6. 013_go语言中的函数多返回值

    代码演示 package main import "fmt" func vals() (int, int) { return 3, 7 } func main() { a, b : ...

  7. 编程与算法（一）、C语言实现二分法（方程近似解）

    一.二分法 假设有这样一个函数f(x) 函数与x轴有一个交点(也就是f(a)*f(b)<0,a<b),现在我们要求这个点的x值,也就是方程f(x)=0的一个实根 直接解显然不合适,那么接下 ...

  8. Qt之先用了再说系列-多线程方式1

    Qt 多线程的用法还是比较简单的,也比较好用,接下来我们就分析分析如何使用. 说起Qt 线程的使用方式,一般有2种使用方式,具体哪种比较好看自己心情了,现在有官方的推荐用法,用不用还是看你心情的 好, ...

  9. 2020-05-31：假如Redis里面有1亿个key，其中有10w个key是以某个固定的已知的前缀开头的，如何将它们全部找出来？

    福哥答案2020-05-31: 使用keys指令可以扫出指定模式的key列表.对方接着追问:如果这个redis正在给线上的业务提供服务,那使用keys指令会有什么问题?这个时候你要回答redis关键的 ...

  10. C#LeetCode刷题-极小化极大

    极小化极大篇 # 题名 刷题 通过率 难度 375 猜数字大小 II   23.4% 中等 464 我能赢吗   25.5% 中等 486 预测赢家   40.4% 中等 843 猜猜这个单词   2 ...