用JavaScript打造小区电梯运行控制程序，让你的出行更加便捷！

55 min read

好的，以下是一个简单的小区楼电梯运行程序的实现：

首先是HTML结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>小区电梯运行程序</title>
    <style>
      .floor {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
        height: 500px;
        width: 100px;
        border: 1px solid #ccc;
      }
      
      .elevator {
        position: absolute;
        top: 450px;
        left: 50px;
        height: 50px;
        width: 100px;
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="floor" id="floor-5">
      <div>5</div>
      <div>4</div>
      <div>3</div>
      <div>2</div>
      <div>1</div>
    </div>
    
    <div class="elevator" id="elevator">
      <span id="elevator-floor">1</span>
    </div>
    
    <script src="elevator.js"></script>
  </body>
</html>

其中.floor表示楼层，.elevator表示电梯。

接着是JavaScript代码：

// 获取DOM元素
const floorContainer = document.querySelector('#floor-5'); // 楼层容器
const elevator = document.querySelector('#elevator'); // 电梯
const elevatorFloor = document.querySelector('#elevator-floor'); // 电梯的楼层

// 初始化电梯楼层
let currentFloor = 1;
elevatorFloor.innerText = currentFloor;

// 电梯上升函数
function elevatorUp() {
  if (currentFloor < 5) {
    currentFloor++;
    floorContainer.style.transform = `translateY(-${(currentFloor - 1) * 100}px)`;
    elevator.style.top = `${(6 - currentFloor) * 100}px`;
    elevatorFloor.innerText = currentFloor;
  }
}

// 电梯下降函数
function elevatorDown() {
  if (currentFloor > 1) {
    currentFloor--;
    floorContainer.style.transform = `translateY(-${(currentFloor - 1) * 100}px)`;
    elevator.style.top = `${(6 - currentFloor) * 100}px`;
    elevatorFloor.innerText = currentFloor;
  }
}

// 监听键盘事件
document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      elevatorUp();
      break;
    case 'ArrowDown':
      elevatorDown();
      break;
    default:
      break;
  }
});

代码的思路很简单：

  1. 获取楼层容器和电梯DOM元素，以及初始化电梯楼层。
  2. 编写电梯上升和下降的函数，并在函数中更新楼层容器和电梯的位置（同时更新电梯楼层）。
  3. 监听键盘事件，根据不同的按键调用对应的函数。