Что мне нужно для создания веб-сайта, подобного этому?

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.

[EDIT] Также я заметил, что при нажатии клавиши без подъема вызывает какое-то странное поведение. Чтобы решить, что пауза может быть использована внутри функции, как:

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 
    }