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

    实例 返回 exp() - 1: <?phpecho(expm1(0) . "<br>");echo(expm1(1) . "<br>&qu ...

  2. PHP xml_get_current_column_number() 函数

    定义和用法 xml_get_current_column_number() 函数获取 XML 解析器的当前列号. 如果成功,该函数则返回当前列号.如果失败,则返回 FALSE.高佣联盟 www.cge ...

  3. Springboot拦截器使用及其底层源码剖析

    博主最近看了一下公司刚刚开发的微服务,准备入手从基本的过滤器以及拦截器开始剖析,以及在帮同学们分析一下上次的jetty过滤器源码与本次Springboot中tomcat中过滤器的区别.正题开始,拦截器 ...

  4. 笨办法学习python3练习代码：argv参数变量与文件操作

    ex15.py 完成ex15.py需要在ex15.py同文件夹目录下面准备一个txt文件(ex15_sample.txt) 执行ex15.py 如: python     ex15.py      e ...

  5. 关于DateTimeOffset的爱恨情仇

    为什么要上DataTimeOffset?因为DateTime无法解决时区问题,经常需要时间戳转换日期,DateTimeOffset就是应运而生,数据格式储存了和UTC的时区差,C#几乎全几乎全版本支持 ...

  6. 自定义 Mybatis 框架

    分析流程 1. 引入dom4j <dependencies> <!--<dependency> <groupId>org.mybatis</groupI ...

  7. 分类模型的F1-score、Precision和Recall 计算过程

    分类模型的F1分值.Precision和Recall 计算过程 引入 通常,我们在评价classifier的性能时使用的是accuracy 考虑在多类分类的背景下 accuracy = (分类正确的样 ...

  8. Python实现迪杰斯特拉算法

    首先我采用邻接矩阵法来表示图(有向图无向图皆可) 图的定义如下: class Graph: def __init__(self, arcs=[]): self.vexs = [] self.arcs ...

  9. Django中的异常

    DJango除了会抛出Python的标准异常外还有一些框架自带的异常. 1. Django核心异常 在django.core.exceptions中:| ObjectDoesNotExist | Fi ...

  10. jieba分词的几种形式

    1.精确模式:试图将句子最精确地分开,适合文本分析 seg_list = jieba.cut(test_text, cut_all=False) seg_list = " ".jo ...