基于JS实现小区楼的电梯运行程序-牛翰网

在前端开发中，实现一个简单的小区楼电梯运行程序可以通过模拟电梯的基本行为来完成。以下是一个使用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电梯运行程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/3345332zq.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END