teclado.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Teclado 1</title>
  5. let p;
  6.  
  7. function iniciar() {
  8. p = document.querySelector('#mensaje');
  9. p.innerHTML = "Vamos a probar el teclado...";
  10. document.addEventListener("keydown", atiendeTeclado);
  11. }
  12.  
  13. function atiendeTeclado(evento) {
  14. console.log(evento);
  15. p.innerHTML = evento.key; // Enséñame la tecla
  16. switch (evento.key) {
  17. case 'a': document.body.style.backgroundColor = 'aquamarine'; break;
  18. case 'b': document.body.style.backgroundColor = 'blue'; break;
  19. case 'c': document.body.style.backgroundColor = 'cyan'; break;
  20. case 'd': document.body.style.backgroundColor = 'darkgray'; break;
  21. case 'e': document.body.style.backgroundColor = ''; break;
  22. case 'f': document.body.style.backgroundColor = 'fuchsia'; break;
  23. case 'g': document.body.style.backgroundColor = 'green'; break;
  24. case 'h': document.body.style.backgroundColor = 'hotpink'; break;
  25. case 'i': document.body.style.backgroundColor = 'indigo'; break;
  26. case 'j': document.body.style.backgroundColor = ''; break;
  27. case 'k': document.body.style.backgroundColor = 'khaki'; break;
  28. case 'l': document.body.style.backgroundColor = 'lime'; break;
  29. case 'm': document.body.style.backgroundColor = 'magenta'; break;
  30. case 'n': document.body.style.backgroundColor = 'navy'; break;
  31. case 'o': document.body.style.backgroundColor = 'orange'; break;
  32. case 'p': document.body.style.backgroundColor = 'pink'; break;
  33. case 'q': document.body.style.backgroundColor = ''; break;
  34. case 'r': document.body.style.backgroundColor = 'red'; break;
  35. case 's': document.body.style.backgroundColor = 'sienna'; break;
  36. case 't': document.body.style.backgroundColor = 'teal'; break;
  37. case 'u': document.body.style.backgroundColor = ''; break;
  38. case 'v': document.body.style.backgroundColor = 'violet'; break;
  39. case 'w': document.body.style.backgroundColor = 'white'; break;
  40. case 'x': document.body.style.backgroundColor = ''; break;
  41. case 'y': document.body.style.backgroundColor = 'yellow'; break;
  42. case 'z': document.body.style.backgroundColor = ''; break;
  43. }
  44. }
  45.  
  46. </script>
  47. </head>
  48. <body onload="iniciar()">
  49. <h1>Teclado 1</h1>
  50. <p id="mensaje"></p>
  51. </body>
  52. </html>

Proinf.net