JavaScript键盘1、2、3、4、5、6、7数字键变颜色

导语

在现代Web开发中，JavaScript已成为了一门不可或缺的编程语言。它可以用来实现各种功能，包括表单验证、动画效果和页面交互等。本文将介绍如何使用JavaScript监听键盘事件，并根据用户按下的数字键来改变页面的颜色。

1. 键盘事件

在JavaScript中，我们可以使用keydown事件监听键盘按下的动作。keydown事件会在用户按下键盘上的某个键时触发，并且会提供有关按下的键的信息。

下面是一个简单的示例代码，演示如何使用keydown事件监听用户按下的键：

document.addEventListener('keydown', function(event) {
  console.log(event.keyCode);
});

在上面的代码中，我们使用addEventListener方法来为整个文档添加一个keydown事件监听器。当用户按下键盘上的某个键时，浏览器会触发该事件，并将事件对象传递给回调函数。我们可以使用event.keyCode属性来获取用户按下的键的代码。

2. 改变页面颜色

现在我们已经知道如何监听用户按下的键，下面我们将介绍如何根据用户按下的数字键来改变页面的颜色。

首先，我们需要准备一个用于显示颜色的元素。我们可以使用一个div元素，并为其设置一个唯一的id属性，以便于我们在JavaScript中获取该元素。

<div id="color-display"></div>

接下来，我们需要根据用户按下的数字键来改变页面的颜色。我们可以使用switch语句来根据按下的键执行相应的操作。

document.addEventListener('keydown', function(event) {
  var colorDisplay = document.getElementById('color-display');
  
  switch (event.keyCode) {
    case 49: // 1
      colorDisplay.style.backgroundColor = 'red';
      break;
    case 50: // 2
      colorDisplay.style.backgroundColor = 'orange';
      break;
    case 51: // 3
      colorDisplay.style.backgroundColor = 'yellow';
      break;
    case 52: // 4
      colorDisplay.style.backgroundColor = 'green';
      break;
    case 53: // 5
      colorDisplay.style.backgroundColor = 'blue';
      break;
    case 54: // 6
      colorDisplay.style.backgroundColor = 'indigo';
      break;
    case 55: // 7
      colorDisplay.style.backgroundColor = 'violet';
      break;
  }
});

在上面的代码中，我们首先获取了用于显示颜色的div元素，并将其存储在colorDisplay变量中。然后，我们使用switch语句根据按下的键来分别改变colorDisplay的背景颜色。

3. 完整示例

下面是一个完整的示例，演示如何使用JavaScript监听键盘事件，并根据用户按下的数字键来改变页面的颜色：

<!DOCTYPE html>
<html>
<head>
  <style>
    #color-display {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="color-display"></div>

  <script>
    document.addEventListener('keydown', function(event) {
      var colorDisplay = document.getElementById('color-display');

      switch (event.keyCode) {
        case 49: // 1
          colorDisplay.style.backgroundColor = 'red';
          break;
        case 50: // 2
          colorDisplay.style.backgroundColor = 'orange';
          break;
        case 51: // 3
          colorDisplay.style.backgroundColor = 'yellow';
          break;
        case 52: // 4
          colorDisplay.style.backgroundColor = 'green';
          break;
        case 53: // 5
          colorDisplay.style.backgroundColor = 'blue';
          break;
        case 54: // 6
          colorDisplay.style.backgroundColor = 'indigo';
          break;
        case 55: // 7
          colorDisplay.style.backgroundColor = 'violet';
          break;
      }
    });
  </script>
</body>
</html>

在上面的代码中，我们首先定义了一个用于显示颜色的div元素，并为其设置了