作者：款款迷恋_420 | 来源：互联网 | 2023-09-18 15:22
实现的效果如下&＃xff1a;
这个效果是Javascript30天挑战的第一个小项目&＃xff0c;具体项目可见如下官网 &＃xff1a;
Javascript30 挑战官网地址&＃xff1a; Javascript30.com/
Javascript30 挑战github源码地址&＃xff1a; github.com/wesbos/Java…
接下来&＃xff0c;让我们了解一下这个效果是怎么做出来的吧~ 在我做的时候&＃xff0c;我将它分成了css和js两个部分&＃xff1a;
css方面 &＃xff0c;我们需要一个大盒子装9个小盒子&＃xff0c;为使他们整齐的排列在页面中间&＃xff0c;我们需要用到flex布局 &＃xff0c;添加justify-content和align-items实现该效果&＃xff0c;然后在小盒子中添加span等元素来写入文字。如何实现对应的鼓声音效呢&＃xff1f; 我们需要用到audio标签&＃xff0c;然后为每个audio和小盒子中放对应字母的盒子添加相同的data-属性 &＃xff0c;方便之后在js中选出对应的元素。不了解data-属性 的可以看这个博客&＃xff1a;
接着我们来看js的部分 。首先我们来分析一下我们需要做出的效果 &＃xff1a;
下面我们对应这三点展开解释&＃xff1a;
首先我们需要用到onkeydown响应函数&＃xff0c;传入event参数&＃xff0c;表示当键盘上有键按下时&＃xff0c;会进入该函数&＃xff1b;我们如何知道按下的是哪个键呢 &＃xff1f;这时候需要用到event参数的keyCode 属性&＃xff0c;该属性和键盘上的键一一对应&＃xff0c;我们可以通过console.log(event.keyCode)获取&＃xff1b;
接着&＃xff0c;知识点来了&＃xff0c;我们要如何选择对应的键 呢&＃xff1f;这时我们之前提到的data-属性 就派上用场了&＃xff0c;拿audio举例&＃xff0c;我们需要通过document.querySelector(audio[data-key&＃61;"${event.keyCode}"])来获取对应的元素。
第一个效果&＃xff0c;我们通过上面的步骤获取到对应的audio元素后&＃xff0c;将其current Time设置为0&＃xff0c;然后调用play()函数令该音效播放&＃xff1b; 第二个效果&＃xff0c;我们需要提前在style中写好想要的效果&＃xff0c;然后同第一点&＃xff0c;获取到装字母的div元素之后&＃xff0c;使用该盒子classList属性中的add()函数&＃xff0c;为该盒子添加样式。 第三个效果&＃xff0c;在之前的效果全都实现之后&＃xff0c;令效果消失 。我们可以使用ontransitionend响应函数或者使用addEventListener监听transitionend 事件&＃xff0c;当前面的效果产生之后&＃xff0c;会进入该事件响应函数&＃xff0c;我们可以在其中实现&＃xff1a;当事件的transition未进行时return&＃xff0c;当已进行时抵用class List属性中的remove()函数删掉之前添加的css选择器。具体可以见下面的代码 一些小tips&＃xff1a;
在transitionend 事件的响应函数中&＃xff0c;我们需要判断事件的propertyName 属性是否为transform&＃xff0c;这一点我们可以通过console.log查看该事件&＃xff0c;在其中就能查看到该属性&＃xff1b;以及之后的target &＃xff0c;都可以查看到。
代码如下&＃xff1a;
< ! DOCTYPE html> < html lang&＃61; "en" > < head> < meta charset&＃61; "UTF-8" > < meta http- equiv&＃61; "X-UA-Compatible" content&＃61; "IE&＃61;edge" > < meta name&＃61; "viewport" content&＃61; "width&＃61;device-width, initial-scale&＃61;1.0" > < title> Document< / title> < style> html{ background: url ( background. jpg) bottom center; background- size: cover; } * { margin: 0 ; padding: 0 ; } . container { display: flex; justify- content: center; align- items: center; height: 100 vh; } . box { width: 90 px; border: 4 px solid black; background- color: rgba ( 0 , 0 , 0 , .4 ) ; text- align: center; margin: 10 px; padding: 10 px; transition: all .07 s ease; } kbd { font- size: 34 px; color: white; display: block; text- shadow: 0 0 2 px black; } . clap { font- size: 14 px; margin- top: 5 px; color: #ffc600; display: block; text- transform: uppercase; letter- spacing: 2 px; } . high { border- color: #ffc600; box- shadow: 0 0 1 rem #ffc600; transform: scale ( 1.1 ) ; } < / style> < / head> < body> < div class &＃61; "container" > < div class &＃61; "box" data- key&＃61; "65" > < kbd> A < / kbd> < span class &＃61; "clap" > boom< / span> < / div> < div class &＃61; "box" data- key&＃61; "83" > < kbd> S < / kbd> < span class &＃61; "clap" > clap< / span> < / div> < div class &＃61; "box" data- key&＃61; "68" > < kbd> D < / kbd> < span class &＃61; "clap" > hihat< / span> < / div> < div class &＃61; "box" data- key&＃61; "70" > < kbd> F < / kbd> < span class &＃61; "clap" > kick< / span> < / div> < div class &＃61; "box" data- key&＃61; "71" > < kbd> G < / kbd> < span class &＃61; "clap" > openhat< / span> < / div> < div class &＃61; "box" data- key&＃61; "72" > < kbd> H < / kbd> < span class &＃61; "clap" > ride< / span> < / div> < div class &＃61; "box" data- key&＃61; "74" > < kbd> J < / kbd> < span class &＃61; "clap" > snare< / span> < / div> < div class &＃61; "box" data- key&＃61; "75" > < kbd> K < / kbd> < span class &＃61; "clap" > tink< / span> < / div> < div class &＃61; "box" data- key&＃61; "76" > < kbd> L < / kbd> < span class &＃61; "clap" > tom< / span> < / div> < / div> < audio src&＃61; "sounds/boom.wav" data- key&＃61; "65" > < / audio> < audio src&＃61; "sounds/clap.wav" data- key&＃61; "83" > < / audio> < audio src&＃61; "sounds/hihat.wav" data- key&＃61; "68" > < / audio> < audio src&＃61; "sounds/kick.wav" data- key&＃61; "70" > < / audio> < audio src&＃61; "sounds/openhat.wav" data- key&＃61; "71" > < / audio> < audio src&＃61; "sounds/ride.wav" data- key&＃61; "72" > < / audio> < audio src&＃61; "sounds/snare.wav" data- key&＃61; "74" > < / audio> < audio src&＃61; "sounds/tink.wav" data- key&＃61; "75" > < / audio> < audio src&＃61; "sounds/tom.wav" data- key&＃61; "76" > < / audio> < script> function fun ( e ) { console. log ( e) if ( e. propertyName !&＃61;&＃61; &＃39;transform&＃39; ) return ; e. target. classList. remove ( &＃39;high&＃39; ) ; } let box&＃61; Array. from ( document. querySelectorAll ( ".box" ) ) ; box. forEach ( x &＃61;> x. addEventListener ( "transitionend" , fun) ) ; window. onkeydown &＃61; function ( event ) { let now &＃61; document. querySelector ( &＃96; div[data-key&＃61;" ${ event. keyCode} "] &＃96; ) ; let sound&＃61; document. querySelector ( &＃96; audio[data-key&＃61;" ${ event. keyCode} "] &＃96; ) ; if ( ! now || ! sound) return ; now. classList. add ( "high" ) ; sound. currentTime&＃61; 0 ; sound. play ( ) ; } < / script> < / body> < / html>
京公网安备 11010802041100号