javascript30--day01--Drum kit

相关视频链接：https://www.bilibili.com/video/av8481988/?p=3

Drum kit

做题思路
（1）监听键盘事件 addEventListener(‘事件名’,执行函数);

window.addEventListener(“keydown”,playSound);

（2）当A-L键按下的时候，播放音效 audio.play( );

（3）播放动画 Element.classList.add(“className”);

动画结束之后，移除动画 Element.classList.remove(“className”);

需要了解的知识点

 Html方面：

（一）audio

1．音频格式 .mp3 .wav .ogg
 <audio  data-key="65"  src="sounds/clap.wav" > </audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

css方面：

（一）min-height: 100vh;

1．min-height可设置元素的最小高度；

2．单位vh：

“视区”所指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight高度大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vh即当前视窗的1%。类似的单位还有vw，视窗的宽度

（二）justify-content: center;

1．设置或检索弹性盒子（display: flex;）元素在主轴（横轴）方向上的对齐方式。

2．justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

flex-start
flex-end
center
space-between
space-around
initial

（三）transition过渡

1．元素从一种样式转变到另一个的效果

2．transition : width 2s; // 指定添加效果的css属性为width，效果持续时间为2s

3．属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

其中，过渡效果的时间曲线函数有：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果 （cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

（四）transform变换

1．固定的属性：旋转，缩放，偏移，常与transition一起配合使用

2．语法：transform : none | transform-function;

值	描述
none	定义不进行转换。
translate(x,y)	定义2D转换。
translate3d(x,y,z)	定义3D转换。
translateX(x)	定义转换只是用X轴的值
translateY(y)	定义转换，只是用Y轴的值
translateZ(z)	定义3D转换，只是用Z轴的值。
scale(x[,y]?)	定义2D缩放转换。
scale3d(x,y,z)	定义3D缩放转换。
scaleX(x)	通过设置X轴的值来定义缩放转换。
scaleY(y)	通过设置Y轴的值来定义缩放转换。
scaleZ(z)	通过设置Z轴的值来定义3D缩放转换。
rotate(angle)	定义2D旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义3D旋转。
rotateX(angle)	定义沿着X轴的3D旋转。
rotateY(angle)	定义沿着Y轴的3D旋转。
rotateZ(angle)	定义沿着Z轴的3D旋转。
skew(x-angle,y-angle)	定义沿着和Y轴的2D倾斜转换。
skewX(angle)	定义沿着X轴的2D倾斜转换。
skewY(angle)	定义沿着Y轴的2D倾斜转换。
perspective(n)	为3D转换元素定义透视视图。

（五）animation动画

1．元素从一种延时逐渐变化为另一种样式的效果。

2．语法：@keyframes animationname {keyframes-selector {css-styles;}}

3．示例：

@keyframes mymove

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

4．属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

（六）display

1．规定元素应该生成的框的类型

2．display: inline(默) | inline-block | block | none;

Inline 显示为内联元素，元素前后没有换行符
inline-block 显示为行内块元素
Block 显示为块级元素，此元素前后有换行符
None 此元素不会被显示

Js方面

（一）querySelector( ) 和 querySelectorAll( )

1．document.querySelector(css选择器1，选择器2); // 返回的是匹配指定选择器的第一个元素。

2．document.querySelectorAll( css选择器);  //返回的是匹配指定选择起的所有元素

3．querySelectorAll（）和getElementByTagName( )区别

https://futu.im/posts/2018-01-20-querySelectorAll-vs-getElementsByTagName/

\	querySelectorAll	getElementsByTagName
遍历方式	深度优先	深度优先
返回值类型	NodeList	HTMLCollection
返回值状态	静态	动态

4．querySelectorAll() 比getElementByTagName() 慢的原因：
https://www.w3cplus.com/javascript/querySelectorAll-vs-getElementsByTagName.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

使用getElementsByTagName方法我们得到的结果就像是一个对象的索引，而通过querySelectorAll方法我们得到的是一个对象的克隆；所以当这个对象数据量非常大的时候，显然克隆这个对象所需要花费的时间是很长的。

（二）Audio对象

1．对应<audio>标签；

2．属性：常用属性为audio.currentTime

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

3．方法：常用方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

（三）Data-* 自定义属性

（四）classList

1．返回元素的类名，用于在元素中添加、移除、切换css类

2．Element.classList ;

3．属性：length

4．方法：

element.classList.add( class1, class2 ……) 在元素中添加一个或多个类

element.classList.remove( class1, class2 ……)  移除一个或多个类名

element.classList.toggle(class, true | false) 在元素中切换类名

（五）` `和${xx}

1．` ` 模板字符串 ${xx}模板占位符

2．功能：

（1）与普通字符串''  ""没有什么区别 console.log(“hello”); console.log(`hello`);

（2）字符串插值/字符串连接更加方便。

var a=[1,2,3];
function b(){return “world”);
console.log(`hello ${a} ${b()}`);// hello 1,2,3 world

其他

-ms-  IE内核识别码

-o- Opera内核识别码

-moz- FireFox内核识别码

-Webkit- 谷歌内核识别码