创建类似这样的网站需要什么？

Question

我想制作一个类似于 http://www.lidogotlights.com 的网站，但我似乎无法弄清楚按下某个键时在屏幕上显示图像的代码。我能够打开该网站的页面源，它基本上只是按下按键时触发的 GIF。我似乎只是在搜索中兜圈子，我很确定我需要一个 KeyListener，但我只是不知道如何开始。而且我可能必须预加载图像或隐藏它们？

此外，仅 javascript 是否可行？

*P.S。我还是很新的编码所以这不需要是完美的，我只是想弄清楚如何执行关键事件功能。

Answer 1

一种方法是向 window 添加事件侦听器，例如：

window.addEventListener("keypress", checkKeyPressed, false);

function checkKeyPressed(e) {
    if (e.charCode == "97") {
        alert("The 'a' key is pressed.");
    }
}

您可以将背景图片更改为所需的 gif 来代替提醒。

[编辑] 我还注意到在没有抬起的情况下按下一个键会导致一些奇怪的行为。要解决可以在函数内部使用暂停的问题，例如：

function checkKeyPressed(e) {
        if (e.charCode == "97") {
            //Change background gif
            var currentTime = new Date().getTime();
            miliseconds = //length of gif
            while (currentTime + miliseconds >= new Date().getTime()) {
            }
            //Change background gif to default
    }

创建类似这样的网站需要什么？

What do I need to create a website similar to this?

javascript

jquery

keyboard

keylistener

keyevent