简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
608

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
P粉3453027532023-09-08 09:34:22 2 Etage

您可以使用 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>
Wie +0
Antwort hinzufügen
P粉015402013
P粉0154020132023-09-08 00:33:04 1 Etage

我认为不可能做到这样，当从另一个窗口按下 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;
      }
    }
  });
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！