首頁  >  問答  >  主體

如何在某些按鍵上變更空白 HTML 中的背景顏色(綠色/紅色)?

有人有關於如何在按下某些按鈕時更改 HTML 中的背景顏色的解決方案嗎,例如字母 A。 每當我按下按鈕時,顏色就會切換為其他顏色(紅色變為綠色,或綠色變為紅色),並保持這種狀態。但好處是,當我不專注於網頁瀏覽器時它可以工作,因此當我透過瀏覽器使用其他應用程式時它也可以工作。抱歉菜鳥問題和語言障礙。謝謝您的回覆。

與此連結類似,但應該位於按鍵上: 如何僅使用一個按鈕更改不同的背景顏色

P粉211273535P粉211273535378 天前522

全部回覆(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
  • 取消回覆