代码如下
 
<!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. PHP floor() 函数

    实例 向下舍入为最接近的整数: <?phpecho(floor(0.60) . "<br>");echo(floor(0.40) . "<br&g ...

  2. MySQL选错索引导致的线上慢查询事故

    前言 又和大家见面了!又两周过去了,我的云笔记里又多了几篇写了一半的文章草稿.有的是因为质量没有达到预期还准备再加点内容,有的则完全是一个灵感而已,内容完全木有.羡慕很多大佬们,一周能产出五六篇文章, ...

  3. asp.net core 3.1 自定义中间件实现jwt token认证

    asp.net core 3.1 自定义中间件实现jwt token认证 话不多讲,也不知道咋讲!直接上代码 认证信息承载对象[user] /// <summary> /// 认证用户信息 ...

  4. vue-cookies 使用

    import VueCookies from 'vue-cookies' Vue.use(VueCookies) $cookies.config() 设置默认值 $cookies.config(exp ...

  5. 谁来教我渗透测试——黑客必须掌握的HTML基础（一）

    小伙伴们,好几天不见了,这一周菜鸟小白工作很忙,所以没有每天更新学习内容,但是菜鸟小白的学习是没有停下来的,只是没有时间来整理学习笔记了.现在就将菜鸟小白这两天学习的HTML基础和大家分享,其中还会拿 ...

  6. Flink的状态编程和容错机制(四)

    一.状态编程 Flink 内置的很多算子,数据源 source,数据存储 sink 都是有状态的,流中的数据都是 buffer records,会保存一定的元素或者元数据.例如 : ProcessWi ...

  7. C# ASP 异步存储数据

    1.异步委托 在导航栏接收到提交的请求后,调用个各子画面的保存答案方法,之后实例化委托 saveToDB . 当执行BeginInvoke后,服务器会另起线程执行saveToDB里的的方法,因为这里要 ...

  8. Eclipse变得很卡

    半个月前,发现Eclipse很卡很卡,尤其在按住Ctrl选择方法的实现类的时候,电脑的反应速度让开发者无法忍受. Eclipse还经常未响应状态. 开始以为Eclipse的运行内存设置小了,把ecli ...

  9. 深入理解 Java 内存模型 JMM 与 volatile

    Java 内存模型(Java Memory Model,简称 JMM)是一种抽象的概念,并不真实存在,它描述的是一组规范或者规则,通过这种规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象 ...

  10. 送大家几个cnblogs号，供快捷评论，请谨慎使用

    欢迎评论& 3461896724@qq.com互动 可以在我的首页看更多 #1先送大家几个号:(密码都是 MLdlight2020)请区分大小写(可以直接复制) 写过一篇 免费验证码接收网站& ...