De quoi ai-je besoin pour créer un site Web semblable à celui-ci?

Question

Je veux créer un site Web similaire à http://www.lidogotlights.com mais je n'arrive pas à trouver le code pour faire apparaître une image sur votre écran lorsqu'une touche est pressée. J'ai été en mesure d'ouvrir la source de la page du site Web, et il s'agit essentiellement de GIF déclenchés sur une touche enfoncée. J'ai l'impression d'être en train de tourner en rond avec mes recherches, je suis à peu près sûr que j'ai besoin d'un KeyListener, je ne sais pas comment commencer. Et que je devrais précharger les images ou les cacher?

Aussi, est-ce possible avec juste javascript?

* P.S. Je suis encore très nouveau codage donc cela n'a pas besoin d'être parfait, je veux juste comprendre comment effectuer la fonction des événements clés.

Answer 1

Une façon de le faire serait d'ajouter un-écouteur d'événement à la fenêtre comme:

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

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

Au lieu de l'alerte vous pouvez changer l'image d'arrière-plan gif requis.

[EDIT] Aussi, j'ai remarqué en appuyant sur une touche sans soulever provoque un comportement étrange. Pour résoudre qu'une pause peut être utilisé dans la fonction comme:

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 
    }