1. 在HTML页面中生成26个长宽高为80px的正方形块,并给每个块添加内容a-z。
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 80px;
      height: 80px;
      display: inline-block;
      text-align: center;
      line-height: 80px;
      font-size: 24px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="box">a</div>
  <div class="box">b</div>
  <div class="box">c</div>
  <!-- ... -->
  <div class="box">z</div>
</body>
</html>
  1. 使用JavaScript捕捉用户的键盘输入,并根据输入的字母改变对应色块的颜色。
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 80px;
      height: 80px;
      display: inline-block;
      text-align: center;
      line-height: 80px;
      font-size: 24px;
      border: 1px solid black;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var boxes = document.getElementsByClassName('box');
      document.addEventListener('keydown', function(event) {
        var key = event.key.toLowerCase();
        if (key >= 'a' && key <= 'z') {
          var index = key.charCodeAt(0) - 'a'.charCodeAt(0);
          boxes[index].style.backgroundColor = 'red';
        }
      });
    });
  </script>
</head>
<body>
  <div class="box">a</div>
  <div class="box">b</div>
  <div class="box">c</div>
  <!-- ... -->
  <div class="box">z</div>
</body>
</html>

这段代码使用了keydown事件来捕捉用户的键盘输入,并使用getElementsByClassName方法获取所有色块的引用。当用户按下字母键时,会将对应色块的背景颜色改为红色

1在HTML页面中生成26个长宽高分别为80px的正方形块块的内容依次是a-z2 捕捉用户的键盘输入当用户输入字母时对应色块的颜色改变。

原文地址: https://www.cveoy.top/t/topic/iqkv 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录