基于JavaScript实现小区电梯运行模拟程序

电梯模拟程序概述

在前端开发实践中，可以通过模拟电梯的基本行为来构建一个简单的小区楼电梯运行程序。以下展示一个使用JavaScript编写的简易电梯模拟方案，该方案支持用户选择目标楼层，并直观模拟电梯的上下移动过程。

HTML部分（用于创建用户界面）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯模拟程序</title>
    <style>
        #elevator {
            width: 100px;
            height: 100px;
            background-color: grey;
            position: absolute;
            left: 50px;
            top: 50px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
        .floor {
            height: 50px;
            width: 100%;
            border-bottom: 1px solid black;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id="elevator">1</div>
    <div id="floors">
        <div class="floor" onclick="requestFloor(1)">1</div>
        <div class="floor" onclick="requestFloor(2)">2</div>
        <div class="floor" onclick="requestFloor(3)">3</div>
        <!-- 添加更多楼层 -->
    </div>
    <script src="elevator.js"></script>
</body>
</html>

JavaScript部分（用于实现电梯逻辑）：

let currentFloor = 1; // 电梯当前所在楼层
let targetFloor = 1; // 电梯目标楼层
const elevator = document.getElementById('elevator'); // 电梯元素
const floors = document.querySelectorAll('.floor'); // 所有楼层元素
let isMoving = false; // 电梯是否正在移动
const moveSpeed = 500; // 电梯移动速度（毫秒）
// 更新电梯显示楼层
function updateElevatorDisplay() {
    elevator.textContent = currentFloor;
}
// 移动电梯到指定楼层
function moveToFloor(floor) {
    if (isMoving || floor === currentFloor) return; // 如果电梯正在移动或已在目标楼层，则不执行移动
    isMoving = true; // 设置电梯为移动状态
    const distance = Math.abs(floor - currentFloor) * 50; // 计算移动距离（每个楼层高度为50px）
    const direction = floor > currentFloor ? 'down' : 'up'; // 判断移动方向
    const finalTop = 50 + (floor - 1) * 50; // 计算电梯最终位置（顶部偏移量）
    elevator.style.transition = `top ${moveSpeed}ms linear`; // 设置过渡效果
    elevator.style.top = `${finalTop}px`; // 更新电梯位置
    // 在移动结束后更新当前楼层和状态
    setTimeout(() => {
        currentFloor = floor;
        isMoving = false;
        updateElevatorDisplay();
    }, moveSpeed);
}
// 请求电梯到指定楼层
function requestFloor(floor) {
    if (floor === currentFloor) return; // 如果已在请求楼层，则不执行操作
    targetFloor = floor; // 设置目标楼层
    if (!isMoving) { // 如果电梯当前未移动，则立即开始移动
        moveToFloor(targetFloor);
    } else { // 如果电梯正在移动，则在当前移动结束后开始新的移动（简化逻辑，不考虑方向优化）
        setTimeout(() => {
            moveToFloor(targetFloor);
        }, moveSpeed);
    }
}

功能扩展建议

该简易电梯模拟程序允许用户通过点击楼层按钮来选择目标楼层，并实时模拟电梯的上下行状态。开发者可根据实际需求对程序进行扩展，例如增加更多楼层支持、优化电梯移动逻辑（如考虑同方向连续移动的情况），或添加电梯门开关的动画效果等。

到此这篇关于使用JS实现简单小区楼电梯运行程序的文章就介绍到这了，更多相关js电梯运行程序内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！