代码如下
 
<!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. ZR 提高十连 DAY 4

    哇 这题目怎么一次比一次毒瘤 当然这次还好 有会做的题目. T1 一眼看上去 毒瘤!再看一眼 我真不想看了 扔了. T2 哇感觉能写 哇这不是 随便都有40分了么 二分?优化一下65到手了.然后剩下的 ...

  2. 剑指 Offer 57 - II. 和为s的连续正数序列

    本题 题目链接 题目描述 我的题解 方法三双100%, 方法一 适合范围广 方法一:双指针(也叫 滑动窗口) 思路分析 用两个指针i和表示当前枚举到的以i为起点,j为终点的区间,sum表示[i,j]的 ...

  3. python之路第一节-pip的使用

    第一次写博客,一边吃着旺仔冻痴一边学着python,爽~ 我之理解pip 首先,python封装好了大量的函数,这些函数存在各种各样的库中. 那么怎么去向我们可爱的pycharm等软件导入这些库呢,两 ...

  4. react引入相同组件时互不影响

    具体代码可以查看我的代码仓库 https://gitee.com/haomYGH/Web20/tree/master/010-React/014-redux-immutable 页面展示 要处理的问题 ...

  5. 微信小程序--家庭记账小账本（五）

    (源码已上传至github,https://github.com/xhj1074376195/CostBook_weixin) 今天,尝试弄了账单的表,发现还是弄不了,于是就把账单上的删除功能给去了, ...

  6. Python3中，map()函数、filter()函数、reduce()函数的比较

    1.map(function,iterable):function为函数,或者lambda表达式,iterable是可迭代的序列,即对iterable中的每个item执行一遍function或者lam ...

  7. Java Redis系列2 （redis的安装与使用+redis持久化的实现））

    Java Redis系列2 (redis的安装与使用+redis持久化的实现) 什么是Redis? Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库,官方提供测试数据,50 ...

  8. Vue 内联模板(inline-template)

    内联模板不会把子组件的内容分发渲染到父组件中 而是需要在父组件中实现其内容的渲染 父组件 <template> <div> <template-inline inline ...

  9. 用python爬取B站在线用户人数

    最近在自学Python爬虫,所以想练一下手,用python来爬取B站在线人数,应该可以拿来小小分析一下 设计思路 首先查看网页源代码,找到相应的html,然后利用各种工具(BeautifulSoup或 ...

  10. golang 复数

    目录 1.声明/赋值/初始化 2.类型 3.取虚实部数值 4.运算 5.注意 跳转 1.声明/赋值/初始化 var name complex128 =complex(x,v) name := comp ...