这是我的html代码
<H1> <center> BASIC DRUM KIT </center> </H1>
<img class="drums" src="drums.jpg" />
<button class="kick" onclick="Kick()"> Bass Drum </button>
<button class="snare" onclick="Snare()"> Snare </button>
<button class="floortom" onclick="FloorTom()"> Floor Tom </button>
<button class="lowtom" onclick="LowTom()"> Low Tom </button>
<button class="hightom" onclick="HighTom()"> High Tom </button>
<button class="hihat" onclick="OpenHat()"> Open Hi-Hat </button>
<button class="cymbal" onclick="Cymbal1()"> Cymbal </button>
<button class="cymbal2" onclick="Cymbal2()"> Cymbal </button>
<button class="ride" onclick="RideCymbal()"> Ride Cymbal</button>
<hr />
CSS
.drums{
position:absolute;
margin-top:2em;
margin-left:30em;}
.cymbal {
position: absolute;
margin-top:15em;
margin-left:75em; }
.cymbal2 {
position: absolute;
margin-top:15em;
margin-left:48.5em; }
.hihat {
position: absolute;
margin-top:23em;
margin-left:42.4em; }
.ride {
position: absolute;
margin-top:23em;
margin-left:78em; }
.hightom {
position: absolute;
margin-top:21.5em;
margin-left:54.5em; }
.kick {
position: absolute;
margin-top:30em;
margin-left:60.5em; }
.snare {
position: absolute;
margin-top:30em;
margin-left:50.5em; }
.floortom {
position: absolute;
margin-top:30.2em;
margin-left:72.7em; }
.lowtom {
position: absolute;
margin-top:21.5em;
margin-left:68.2em; }
JavaScript
function Kick() {
var kick = new Audio("kick-acoustic02.wav");
kick.play(); }
function Snare() {
var snare = new Audio("snare-acoustic01.wav");
snare.play(); }
function FloorTom() {
var floortom = new Audio("snare-brute.wav");
floortom.play(); }
function LowTom() {
var lowtom = new Audio("tom-acoustic02.wav");
lowtom.play(); }
function HighTom() {
var hightom = new Audio("tom-acoustic01.wav");
hightom.play(); }
function OpenHat() {
var hihat = new Audio("openhat-acoustic01.wav");
hihat.play(); }
function Cymbal1() {
var cymbal = new Audio("crash-acoustic.wav");
cymbal.play(); }
function Cymbal2() {
var cymbal2 = new Audio("crash-acoustic2.wav");
cymbal2.play(); }
function RideCymbal() {
var ride = new Audio("ride-acoustic02.wav");
ride.play(); }
它已制作完成并可以正常工作,但我无法使用 css
添加 background-color
。我什至尝试在 html
中使用 body style="background-color:*color*;"
但它没有用。有什么建议吗?
其他问题:如何将键盘键分配给 html
按钮?这比单击按钮要好得多。
谢谢,是的,这是我的第一个脚本/页面,也是 stackoverflow.com 上的第一个问题,对于不专业的行为,我深表歉意,我希望得到一些建设性的批评 :)
最佳答案
要将键盘事件分配给 DOM(文档对象模型),您需要将事件处理程序绑定(bind)到 Document
。
最简单的方法是通过 jQuery:
$( "document" ).keypress(function( event ) {
if ( event.which == 13 ) { // keycode
event.preventDefault();
}
});
https://api.jquery.com/keypress/
纯 JavaScript 方式(不使用 jQuery):
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, callback);
}
}
addEvent(window, "keydown", Keypress);
addEvent(window, "keyup", Keyoff);
JavaScript equivalent of jQuery's keyup() and keydown()
关键代码
您可以在 http://keycode.info/ 查看键码以交互方式。
还有一件事
如果您要问两个问题,请尝试将它们分成两个。
关于javascript - HTML 可点击鼓组,无法在 CSS/HTML 中设置背景颜色/如何将键盘键分配给 HTML 按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42195292/