快捷導(dǎo)航

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

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

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

在前端開(kāi)發(fā)中，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小區(qū)樓電梯運(yùn)行程序可以通過(guò)模擬電梯的基本行為來(lái)完成。以下是一個(gè)使用JavaScript實(shí)現(xiàn)的簡(jiǎ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部分（用于實(shí)現(xiàn)電梯邏輯）：

let currentFloor = 1; // 電梯當(dāng)前所在樓層
let targetFloor = 1; // 電梯目標(biāo)樓層
const elevator = document.getElementById('elevator'); // 電梯元素
const floors = document.querySelectorAll('.floor'); // 所有樓層元素
let isMoving = false; // 電梯是否正在移動(dòng)
const moveSpeed = 500; // 電梯移動(dòng)速度（毫秒）
// 更新電梯顯示樓層
function updateElevatorDisplay() {
    elevator.textContent = currentFloor;
}
// 移動(dòng)電梯到指定樓層
function moveToFloor(floor) {
    if (isMoving || floor === currentFloor) return; // 如果電梯正在移動(dòng)或已在目標(biāo)樓層，則不執(zhí)行移動(dòng)
    isMoving = true; // 設(shè)置電梯為移動(dòng)狀態(tài)
    const distance = Math.abs(floor - currentFloor) * 50; // 計(jì)算移動(dòng)距離（每個(gè)樓層高度為50px）
    const direction = floor > currentFloor ? 'down' : 'up'; // 判斷移動(dòng)方向
    const finalTop = 50 + (floor - 1) * 50; // 計(jì)算電梯最終位置（頂部偏移量）
    elevator.style.transition = `top ${moveSpeed}ms linear`; // 設(shè)置過(guò)渡效果
    elevator.style.top = `${finalTop}px`; // 更新電梯位置
    // 在移動(dòng)結(jié)束后更新當(dāng)前樓層和狀態(tài)
    setTimeout(() => {
        currentFloor = floor;
        isMoving = false;
        updateElevatorDisplay();
    }, moveSpeed);
}
// 請(qǐng)求電梯到指定樓層
function requestFloor(floor) {
    if (floor === currentFloor) return; // 如果已在請(qǐng)求樓層，則不執(zhí)行操作
    targetFloor = floor; // 設(shè)置目標(biāo)樓層
    if (!isMoving) { // 如果電梯當(dāng)前未移動(dòng)，則立即開(kāi)始移動(dòng)
        moveToFloor(targetFloor);
    } else { // 如果電梯正在移動(dòng)，則在當(dāng)前移動(dòng)結(jié)束后開(kāi)始新的移動(dòng)（簡(jiǎn)化邏輯，不考慮方向優(yōu)化）
        setTimeout(() => {
            moveToFloor(targetFloor);
        }, moveSpeed);
    }
}

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

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

您可能感興趣的文章: