快捷導航

基于JS實現(xiàn)小區(qū)樓的電梯運行程序

更新時間：2025年01月20日 14:13:00 作者：王鐵柱6

本文介紹了如何使用JavaScript實現(xiàn)一個簡單的小區(qū)樓電梯運行程序,用戶可以通過點擊樓層來選擇目標樓層,并模擬電梯的上下行,文章還提示了如何擴展該程序,例如添加更多樓層、優(yōu)化移動邏輯和添加動畫效果,感興趣的朋友一起看看吧

在前端開發(fā)中，實現(xiàn)一個簡單的小區(qū)樓電梯運行程序可以通過模擬電梯的基本行為來完成。以下是一個使用JavaScript實現(xiàn)的簡單電梯模擬程序，它允許用戶選擇樓層并模擬電梯的上下行。

HTML部分（用于創(chuàng)建用戶界面）：

<!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部分（用于實現(xiàn)電梯邏輯）：

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; // 如果電梯正在移動或已在目標樓層，則不執(zhí)行移動
    isMoving = true; // 設(shè)置電梯為移動狀態(tài)
    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`; // 設(shè)置過渡效果
    elevator.style.top = `${finalTop}px`; // 更新電梯位置
    // 在移動結(jié)束后更新當前樓層和狀態(tài)
    setTimeout(() => {
        currentFloor = floor;
        isMoving = false;
        updateElevatorDisplay();
    }, moveSpeed);
}
// 請求電梯到指定樓層
function requestFloor(floor) {
    if (floor === currentFloor) return; // 如果已在請求樓層，則不執(zhí)行操作
    targetFloor = floor; // 設(shè)置目標樓層
    if (!isMoving) { // 如果電梯當前未移動，則立即開始移動
        moveToFloor(targetFloor);
    } else { // 如果電梯正在移動，則在當前移動結(jié)束后開始新的移動（簡化邏輯，不考慮方向優(yōu)化）
        setTimeout(() => {
            moveToFloor(targetFloor);
        }, moveSpeed);
    }
}

這個簡單的電梯模擬程序允許用戶通過點擊樓層來選擇目標樓層，并模擬電梯的上下行。你可以根據(jù)需要擴展這個程序，例如添加更多樓層、優(yōu)化電梯移動邏輯（考慮同方向連續(xù)移動的情況）、添加電梯門開關(guān)動畫等。

到此這篇關(guān)于請用js實現(xiàn)一個簡單的小區(qū)樓的電梯運行程序的文章就介紹到這了,更多相關(guān)js電梯運行程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: