请用js实现一个简单的小区楼的电梯运行程序 

// HTML 结构 (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Elevator Simulation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="building">
    <div class="floors">
      <div data-floor="5" class="floor">5</div>
      <div data-floor="4" class="floor">4</div>
      <div data-floor="3" class="floor">3</div>
      <div data-floor="2" class="floor">2</div>
      <div data-floor="1" class="floor">1</div>
    </div>
    <div class="elevator-shaft">
      <div id="elevator" class="elevator">
      </div>
    </div>
    <div class="buttons">
      <button data-floor="1">1</button>
      <button data-floor="2">2</button>
      <button data-floor="3">3</button>
      <button data-floor="4">4</button>
      <button data-floor="5">5</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

/* style.css */
.building {
  display: flex;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}

.floors {
  width: 30px;
  display: flex;
  flex-direction: column-reverse; /* floors stack from bottom */
}

.floor {
  height: 50px;
  border-top: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elevator-shaft {
  width: 70px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  position: relative; /* for absolute positioning of elevator */
}

.elevator {
  width: 50px;
  height: 50px;
  background-color: yellow;
  position: absolute;
  bottom: 0; /* initial position at ground floor */
  transition: bottom 1s linear; /* smooth transition for movement */
}


.buttons {
  display: flex;
  flex-direction: column;
}

// script.js
const elevator = document.getElementById('elevator');
const buttons = document.querySelectorAll('.buttons button');
let currentFloor = 1;

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const targetFloor = parseInt(button.dataset.floor);
    moveToFloor(targetFloor);
  });
});

function moveToFloor(targetFloor) {
  if (targetFloor === currentFloor) return; // Already on the target floor

  const floorHeight = 50; // Height of each floor in pixels
  const targetPosition = (targetFloor - 1) * floorHeight;

  elevator.style.bottom = `${targetPosition}px`;
  currentFloor = targetFloor;

   // Optional: Add a "ding" sound when reaching the floor
  setTimeout(() => {
    // Play a sound or display an alert
    console.log("Ding! Arrived at floor " + targetFloor);
  }, 1000); // Delay should match the transition duration


}

Key improvements and explanations:

  • HTML Structure: Clearer separation of floors, elevator shaft, and buttons. Uses data-floor attributes for easy floor identification.
  • CSS Styling: Improved styling for visualization, including a smooth transition for the elevator movement. Floors stack from the bottom up for a more natural representation.
  • JavaScript Logic:
    • Uses parseInt() to ensure targetFloor is a number.
    • Prevents unnecessary movement if already on the target floor.
    • Calculates targetPosition dynamically based on floor height.
    • Sets currentFloor after the elevator moves.
    • Added an optional delay and console message to simulate the elevator arriving.

This improved version provides a more robust and visually appealing elevator simulation. You can further enhance it by adding features like:

  • Opening/Closing Doors: Animate the elevator doors opening and closing.
  • Multiple Elevators:
posted @ 2024-11-28 09:42  王铁柱6  阅读(15)  评论(0)    收藏  举报