Question

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

此外，只有javascript可以实现吗？

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

Answer 1

一种方法是在窗口中添加一个事件监听器，如：

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
    }

创建类似于此的网站需要什么？

1 个答案: