作者：款款迷恋_420 | 来源：互联网 | 2023-09-18 15:22
实现的效果如下&＃xff1a;
当按下键盘上对应字母时&＃xff0c;产生不同的击鼓声音&＃xff0c;相应盒子的样式发生改变。
这个效果是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;
(1条消息) html5中data-*属性的作用是什么_persistence勿忘初心-CSDN博客
-
接着我们来看js的部分。首先我们来分析一下我们需要做出的效果&＃xff1a;
&＃xff08;1&＃xff09;点击键盘上对应字母时&＃xff0c;会发出相应的击鼓声&＃xff1b;
&＃xff08;2&＃xff09;点击键盘上对应字母时&＃xff0c;装字母的盒子外边框会出现高亮&＃xff0c;其中的字母会放大&＃xff1b;
&＃xff08;3&＃xff09;高亮和字母放大效果产生之后&＃xff0c;效果会消失&＃xff0c;恢复原状
下面我们对应这三点展开解释&＃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: 100vh; }.box {width: 90px;border: 4px solid black;background-color: rgba(0, 0, 0, .4);text-align: center;margin:10px;padding:10px;transition: all .07s ease;}kbd {font-size: 34px;color: white;display: block;text-shadow: 0 0 2px black;}.clap {font-size: 14px;margin-top: 5px;color: #ffc600;display: block;text-transform: uppercase;letter-spacing: 2px;}.high {border-color: #ffc600;box-shadow: 0 0 1rem #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号