javascript - HTML 可点击鼓组，无法在 CSS/HTML 中设置背景颜色/如何将键盘键分配给 HTML 按钮？

Question

这是我的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 上的第一个问题，对于不专业的行为，我深表歉意，我希望得到一些建设性的批评 :)

Answer 1

要将键盘事件分配给 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/ 查看键码以交互方式。

还有一件事

如果您要问两个问题，请尝试将它们分成两个。