Wie ändere ich die Hintergrundfarbe (grün/rot) in leerem HTML für bestimmte Tasten?
P粉211273535
P粉211273535 2023-09-07 10:08:19
0
2
618

Hat jemand eine Lösung, wie man die Hintergrundfarbe in HTML ändern kann, wenn bestimmte Schaltflächen gedrückt werden, zum Beispiel der Buchstabe A? Immer wenn ich die Taste drücke, wechselt die Farbe zu einer anderen Farbe (Rot zu Grün oder Grün zu Rot) und bleibt so. Aber das Gute daran ist, dass es funktioniert, wenn ich mich nicht auf den Webbrowser konzentriere, also auch, wenn ich andere Apps über den Browser verwende. Entschuldigung für die Noob-Fragen und die Sprachbarriere. Danke für Ihre Antwort.

Ähnlich wie dieser Link, sollte aber auf dem Schlüssel stehen: So ändern Sie verschiedene Hintergrundfarben mit nur einer Schaltfläche

P粉211273535
P粉211273535

Antworte allen(2)
P粉345302753

您可以使用 JavaScript 来检测按键事件并更改背景颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Change background color on keypress</title>
  </head>
  <body>
    <p>Press the 'A' key to change the background color!</p>
    <script>
      var colors = ["red", "green"];
      var currentColorIndex = 0;
      document.addEventListener("keypress", function(event) {
        if (event.key === "a" || event.key === "A") {
          var body = document.getElementsByTagName("body")[0];
          body.style.backgroundColor = colors[currentColorIndex];
          currentColorIndex = (currentColorIndex + 1) % colors.length;
        }
      });
    </script>
  </body>
</html>
P粉015402013

我认为不可能做到这样,当从另一个窗口按下 A 键时,它就会激活,因为在大多数操作系统上,键盘会自动聚焦到聚焦的窗口。可能有一个适用于它的应用程序,但使用起来确实很不方便(如果您尝试按该应用程序内的 A 键,它会转到您的窗口)。

但是,如果您确实找到了方法,这就是您的答案。 作为参考,我假设您网站的背景已经是红色的。

let isRed = true;
  document.addEventListener('keydown', (event) => {
    if (event.key === 'a') {
      if (isRed) {
        document.body.style.backgroundColor = 'green';
        isRed = false;
      } else {
        document.body.style.backgroundColor = 'red';
        isRed = true;
      }
    }
  });
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage