javaScript的一些小项目01-Drum Kit架子鼓

01-Drum Kit架子鼓：

说明：

这主要的功能是：

1、当我在键盘上按下相应的按键，他就会发出相应的声音

2、当按下去的时候会有高亮的效果

3、状态需要恢复到原来的状态

主要效果图预览：

主要代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS Drum Kit</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- data-key是自定义属性 ES5的规范 --><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>// 1、按下按键的时候，播放相应的声音window.addEventListener('keydown',function(e){const audio=document.querySelector(`audio[data-key ="${e.keyCode}"]`)const key =document.querySelector(`div[data-key ="${e.keyCode}"]`)// 这个写法是为了防止当按下除了键盘值以外的其他按键// if(!audio) 的意思就是 if(audio === null)if(!audio) return;// 这是解决当重复按下一个键后，只发出一次声音的情况audio.currentTime =0// currentTime 属性设置或返回音频播放的当前位置（以秒计）// 当设置该属性时，播放会跳跃到指定的位置。audio.play()// 2、按下按键的时候，改变该按键的显示效果// 添加类key.classList.add('playing')// 删除类// key.classList.remove('playing')})function removePlaying(value){if(value.propertyName !== 'transform') return;this.classList.remove('playing')}// 3、按键效果转换之后，恢复到最初状态const keys=Array.from(document.querySelectorAll('.key'))// Array.from()将对象转换为数组// console.log(keys instanceof Array);  truekeys.forEach(key =>{key.addEventListener('transitionend',removePlaying)})
</script></body>
</html>

样式（css）

html {font-size: 10px;background: url('./background.jpg') bottom center;background-size: cover;
}body,html {margin: 0;padding: 0;font-family: sans-serif;
}.keys {display: flex;flex: 1;min-height: 100vh;align-items: center;justify-content: center;
}.key {border: .4rem solid black;border-radius: .5rem;margin: 1rem;font-size: 1.5rem;padding: 1rem .5rem;transition: all .07s ease;width: 10rem;text-align: center;color: white;background: rgba(0,0,0,0.4);text-shadow: 0 0 .5rem black;
}.playing {transform: scale(1.1);border-color: #ffc600;box-shadow: 0 0 1rem #ffc600;
}kbd {display: block;font-size: 4rem;
}.sound {font-size: 1.2rem;text-transform: uppercase;letter-spacing: .1rem;color: #ffc600;
}

javaScript的一些小项目01-Drum Kit架子鼓相关推荐

Java 小项目 01 简单记账软件
1 功能介绍 1.1 功能介绍查询账务多条件查询添加账务编辑账务删除账务 1.2 运行结果 2 环境搭建 1)开发工具:eclipse 2)第三方jar包 jar 包下载 commons-d ...
【Python 爬虫小项目 01】租房数据
思路描述: 整体观测:某网后台数据是自动从数据库里抓取的:比如我选中[深圳]-[南山区]-[竹子林],共有250套房源,每页呈现30套房源数据,这30套在每一次点击进去数据都会略有不同. url方面: ...
Python 小项目 01 爬虫项目爬取链家网南京地区二手房信息
SpiderLianjia 介绍 python爬虫小程序,爬取链家网南京地区普通住宅二手房数据. 代码下载: https://gitee.com/lihaogn/SpiderLianjia 1 程序设 ...
数据分析小项目01 __《少年的你》豆瓣短评__V1.0
本文以<少年的你>为例, 简单实现了爬取数据–保存数据–分析数据–图表展示的全流程. 此为第一个版本, 有很多需要地方将在后续版本中改进. 具体代码见github: https://git ...
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
JavaScript小项目之BMI值计算
项目题目: 实现BMI值计算器项目作用: 复习JavaScript课程知识,学习DOM基础知识,熟悉document对象的使用,实现简单的BMI计算器页面. JavaScript小项目系列前言一 ...
web实践小项目一:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
javascript的localStorage(Web Storage)小项目
我们下面举一个javascript localStorage练手的小项目,是headfirsthtml5中的一个例子,不过我将其进行美化. 项目资源(源码,图片)地址:https://github.c ...
JavaScript购物车小项目
目录前言一.登陆界面的制作登陆界面注册界面代码详情 1.商品促销界面详情解析: 代码详情: 操作指南: 1.登录注册界面: 2.商城界面 3.购物车界面总结前言大家还记得上次给大家分 ...

javaScript的一些小项目01-Drum Kit架子鼓

javaScript的一些小项目01-Drum Kit架子鼓相关推荐

最新文章

热门文章