当前位置：首页 > Web前端 > JavaScript

【JS30-WesBos】PianoKey01

时间：2023-03-27 11:46:30 JavaScript

title:【Nativejavascriptproject】Piano-Kit-01date:2021-11-0719:44:12tags:Nativejavascriptprojectcategories:30nativejavascriptprojects作者：?iaineisalsoyan:30DayChallenge是由WesBos设计的为期30天的原生js编程挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。这个项目就是第一天的“钢琴键”项目。玩得开心网站！?(^?^*)简介本文介绍了如何使用javascripty语法编写一个简单的drumangpiano网页。通过敲击特定的键盘（键），可以发出不同的音调。网址为(https://janice143.github.io/m...)Text1网页的布局和功能整体分为3个部分：1是乐器开关(DrumKit,PianoKit)排列在顶部居中的Block，选中对应的kit，背景图片和按键切换到对应的内容，kit的字体变为白色；2是设置在页面中央的键盘；3是背景图。点击鼠标或按下相应的键盘即可对按键进行操作，并发出相应的音效（黄色字体为音效名称）。按键点击按下后，添加一定的css动画（黄色高亮边框）来区分。2现实原理一、html代码1乐器切换组：DrumKitPianoKit

2DrumKit:

A

DO

S

RE

D

MI

F

FA

G

SOL

H

LA

J

SI

3钢琴套件

A

CLAP

S

HIHAT

D

KICK

F

OPENHAP

G

BOOM

H

RIDE

J

SNARE

K

TOM

L

TINK

2.css代码1实现顶部的切换块(DrumKit,PianoKit)固定在窗口不占位置，脱离标准文档流；居中位置：固定；左：0；右：0；保证金：0汽车;2实现按键居中：使用flex布局实现纵横居中。任何容器都可以指定为弹性布局（flexcontainer），display:flex就可以实现。采用弹性布局的元素称为弹性容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器有6个属性：·flex-direction：水平主轴的方向·flex-wrap：如果无法捕获主轴，可以使用该属性设置环绕形式·flex-flow：组合功能flex-direction和flex-wrap，使用这个属性你可以同时设置这两个属性。justify-content：定义item在主轴（水平方向）的对齐方式align-items：定义item在垂直方向的对齐方式align-content：定义多轴的对齐方式#drumKit,#pianoKit{/*背景颜色：红色；*//*在需要垂直居中的父元素上设置display:flex和align-items:center。要求：父元素必须显示高度值*/display:flex;弹性：1；最小高度：90vh；/*vh是屏幕当前可见高度的100%align-items:center;/*子元素水平居中*/justify-content:center;/*子元素垂直居中*/}90vh代表窗口（当前页面窗口）大小的90%。3当点击键盘时，js会添加播放类，其css布局为.playing{transform:scale(1.1);边框颜色：#ffc600；box-shadow:001rem#ffc600;}4drumkitandpianokit选中后，js会加上选中的类名。设置css代码让选中的字体变成白色以区分#switch.chosen{color:white;}3.JavaScript代码1切换键盘（架子鼓，钢琴架）对于架子鼓：点击drum，添加.chosen，移除pianokit.chosen类名；显示鼓键，隐藏钢琴键；显示响应式背景图像。//点击a标签切换键盘：点击钢琴键盘，添加选择的类，移除鼓类；显示对应的钢琴键盘；给对应的键盘加上chosen，这样audio也可以对应functionaddChosen(){constchosen=document.getElementsByClassName("piano");constnotChosen=document.getElementsByClassName("鼓");chosen[0].classList.add('chosen');notChosen[0].classList.remove('选择');constnotChosenKit=document.getElementById("drumKit");notChosenKit.classList.remove('选择');notChosenKit.style.display="无";constchosenKit=document.getElementById("pianoKit");chosenKit.style.display="flex";chosenKit.classList.add('选择');//改变钢琴墙纸constwallpaper=document.getElementsByTagName("html");墙纸[0].style.backgroundImage="url(./pianoback.jpg)";}函数addChosenDrum(){constchosen=document.getElementsByClassName("drum");constnotChosen=document.getElementsByClassName("piano");chosen[0].classList.add('chosen');notChosen[0].classList.remove('chosen');constnotChosenKit=document.getElementById("pianoKit");notChosenKit.classList.remove('chosen');notChosenKit.style.display="none";constchosenKit=document.getElementById("drumKit");chosenKit.style.display="flex";choseKit.classList.add('chosen');//改变鼓壁纸constwallpaper=document.getElementsByTagName("html");wallpaper[0].style.backgroundImage="url(./drumback.jpg)";}2.敲击键盘上的键，用keycode标记，在对应的键上加上.playing类名，并设置audio.play发出音效。//当一个键盘字母被点击时，对应的键增加一个class属性//控制台.log(音频);如果（！音频）返回；constkey=document.querySelector(`.chosendiv[data-key="${e.keyCode}"]`);key.classList.add('playing');//添加播放类属性audio.currentTime=0;//音频播放audio.play();}3如果连续点击多个按键，多个按键会显示过渡效果（黄色边框，放大1.2倍），为了去掉最后一个按键之前的按键过滤样式，可以使用transitionend事件从已转换的键中删除.playing类名。//移除播放类属性functionremoveTransition(e){if(e.propertyName!='transform')return;this.classList.remove('playing');}constkeys=document.querySelectorAll('.key');keys.forEach(key=>key.addEventListener('transitionend',removeTransition));window.addEventListener('keydown',playSound);4点击鼠标也可以实现按键的音效。设置onclick事件，传入keycode参数。functionclickPlaySound(keycode){//data-key=keycode;constaudio=document.querySelector(`.chosenaudio[data-key="${keycode}"]`);如果（！音频）返回；constkey=document.querySelector(`.chosendiv[data-key="${keycode}"]`);key.classList.add('playing');//添加播放类属性audio.currentTime=0;//音频重头播放audio.play();//控制台日志（音频）；};总结完整代码在Github上，有兴趣的读者不妨试一试。

上一篇：编程（005）-设计一个JavaScript范围算法如下

下一篇：请不要再使用SpringMVC了，太low了！Spring正式公布了一个更强大的替代框架！

【JS30-WesBos】PianoKey01相关文章

最新推荐

猜你喜欢