The following JS Code can a demo drum Tool:
var numberOfdrumButtons = document.querySelectorAll(".drum").length;
// call 2 functions when the click-event is triggered
for (var i = 0; i < numberOfdrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function (){
var buttonInnerHTML = this.innerHTML;
makeSound(buttonInnerHTML);
buttonAnimation(buttonInnerHTML);
});
}
// call 2 functions when the keydown-event is triggered
document.addEventListener("keydown", function(event){
makeSound(event.key);
buttonAnimation(event.key);
});
//function to make sound
function makeSound(key){
switch (key) {
case "w":
var audio = new Audio("sounds/crash.mp3");
audio.play();
case "a":
var audio = new Audio("sounds/kick-bass.mp3");
audio.play();
case "s":
var audio = new Audio("sounds/snare.mp3");
audio.play();
case "d":
var audio = new Audio("sounds/tom-1.mp3");
audio.play();
case "j":
var audio = new Audio("sounds/tom-2.mp3");
audio.play();
case "k":
var audio = new Audio("sounds/tom-3.mp3");
audio.play();
case "l":
var audio = new Audio("sounds/tom-4.mp3");
audio.play();
break;
default:
break;
}
}
//function to add an animation
function buttonAnimation(currentKey){
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("pressed");
setTimeout(function() {
activeButton.classList.remove("pressed");
}, 100
)
}
因此,我的问题是关于<代码>目前Key功能参数:button Animation。 它来自何处? 如果没有事先界定,它如何运作? 如何工作? 在另一项联合材料行动中,我 across倒了同样的价值,我没有cl。 参数为<代码>现存孔。
我试图将“参数”改为“参数”活动,但职能<代码>button Animation(当值Key)在t工作。 具体来说,定时功能就是拖工。