搜索

首页  >  问答  >  正文

如何在某些按键上更改空 HTML 中的背景颜色(绿色/红色)?

有人有关于如何在按下某些按钮时更改 HTML 中的背景颜色的解决方案吗,例如字母 A。 每当我按下按钮时,颜色就会切换为其他颜色(红色变为绿色,或绿色变为红色),并保持这种状态。但好处是,当我不专注于网络浏览器时它可以工作,因此当我通过浏览器使用其他应用程序时它也可以工作。抱歉菜鸟问题和语言障碍。谢谢您的回复。

与此链接类似,但应该位于按键上: 如何仅使用一个按钮更改不同的背景颜色

P粉211273535P粉211273535477 天前646

全部回复(2)我来回复

  • P粉345302753

    P粉3453027532023-09-08 09:34:22

    您可以使用 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>

    回复
    0
  • P粉015402013

    P粉0154020132023-09-08 00:33:04

    我认为不可能做到这样,当从另一个窗口按下 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;
          }
        }
      });

    回复
    0
  • 取消回复