day 6 javascript智慧停車場網頁程式管理系統

2024 iThome 鐵人賽

DAY 6

JavaScript

Javascript網頁程式管理系統系列第 6 篇

16th鐵人賽

neilsu02

2024-09-07 23:33:47

63 瀏覽

分享至

今天是第六天我們可以寫一個javascript智慧停車場網頁程式管理系統，現在停車是大家生活中需要面對的問題，有時候透過智慧停車場系統能更好的更快速的找到車位，以下是我的程式碼

1. HTML：建立基礎的網頁界面

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧停車場管理系統</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>智慧停車場管理系統</h1>

    <div class="parking-lot-info">
        <p>總車位數量: <span id="total-spaces">50</span></p>
        <p>剩餘車位: <span id="available-spaces">50</span></p>
    </div>

    <div class="controls">
        <button id="enter-button">車輛進入</button>
        <button id="exit-button">車輛離開</button>
    </div>

    <div class="log">
        <h3>車輛進出紀錄</h3>
        <ul id="log-list"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS：設計基本的樣式

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    margin: 0;
}

.parking-lot-info {
    margin: 20px 0;
}

.controls {
    margin: 20px 0;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 10px;
    cursor: pointer;
    border: none;
    background-color: #28a745;
    color: white;
}

button#exit-button {
    background-color: #dc3545;
}

button:disabled {
    background-color: #ccc;
}

.log {
    margin-top: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#log-list {
    list-style: none;
    padding: 0;
}

#log-list li {
    padding: 5px;
    background-color: #e9e9e9;
    margin: 5px 0;
}

3. JavaScript：處理停車場進出邏輯

document.addEventListener("DOMContentLoaded", function() {
    let totalSpaces = 50;
    let availableSpaces = 50;

    const totalSpacesElement = document.getElementById("total-spaces");
    const availableSpacesElement = document.getElementById("available-spaces");
    const logList = document.getElementById("log-list");
    const enterButton = document.getElementById("enter-button");
    const exitButton = document.getElementById("exit-button");

    // 更新剩餘車位數量
    function updateAvailableSpaces() {
        availableSpacesElement.textContent = availableSpaces;
        checkButtonStates();
    }

    // 檢查按鈕狀態
    function checkButtonStates() {
        if (availableSpaces === 0) {
            enterButton.disabled = true;
        } else {
            enterButton.disabled = false;
        }

        if (availableSpaces === totalSpaces) {
            exitButton.disabled = true;
        } else {
            exitButton.disabled = false;
        }
    }

    // 車輛進入
    enterButton.addEventListener("click", function() {
        if (availableSpaces > 0) {
            availableSpaces--;
            logAction("車輛進入");
            updateAvailableSpaces();
        }
    });

    // 車輛離開
    exitButton.addEventListener("click", function() {
        if (availableSpaces < totalSpaces) {
            availableSpaces++;
            logAction("車輛離開");
            updateAvailableSpaces();
        }
    });

    // 記錄車輛進出
    function logAction(action) {
        const listItem = document.createElement("li");
        const timestamp = new Date().toLocaleTimeString();
        listItem.textContent = `${action} - 時間: ${timestamp}`;
        logList.appendChild(listItem);
    }

    // 初始化
    updateAvailableSpaces();
});

功能描述：

車位狀態顯示：系統會顯示總車位數量以及剩餘可用車位。
進出按鈕：當車輛進入或離開時，系統會動態更新剩餘車位數。當車位滿時，「車輛進入」按鈕將會被禁用；當車位空時，「車輛離開」按鈕將會被禁用。
進出紀錄：每次車輛進出時，系統會記錄時間並顯示在紀錄區域。

1. DOM 準備完成時執行的函數：`DOMContentLoaded` 事件

document.addEventListener("DOMContentLoaded", function() {
    // 這裡的代碼在網頁完全加載後會被執行
});

DOMContentLoaded 是一個事件，當 HTML 文件完全加載並解析完成時（不必等圖像和其他資源），會觸發此事件。我們將主程式碼包裹在這個事件中，以確保當我們嘗試操作 DOM 元素時，它們已經載入完畢。

2. 變數定義

let totalSpaces = 50; // 總車位數量
let availableSpaces = 50; // 剩餘車位數量

定義停車場的車位總數以及當前可用的剩餘車位，預設都為 50。

const totalSpacesElement = document.getElementById("total-spaces");
const availableSpacesElement = document.getElementById("available-spaces");
const logList = document.getElementById("log-list");
const enterButton = document.getElementById("enter-button");
const exitButton = document.getElementById("exit-button");

透過 getElementById 取得 HTML 中對應的元素，這些元素將用來顯示或觸發與停車場管理相關的行為。
- totalSpacesElement：顯示總車位數。
- availableSpacesElement：顯示當前剩餘車位數。
- logList：車輛進出紀錄的 <ul> 列表。
- enterButton 和 exitButton：車輛進入和離開的按鈕。

3. 更新剩餘車位數量

function updateAvailableSpaces() {
    availableSpacesElement.textContent = availableSpaces; // 更新剩餘車位的顯示
    checkButtonStates(); // 檢查按鈕狀態
}

這個函數會將最新的剩餘車位數量顯示在畫面上，並呼叫 checkButtonStates 來確保按鈕根據剩餘車位狀況正確啟用或禁用。

4. 檢查按鈕狀態

function checkButtonStates() {
    if (availableSpaces === 0) {
        enterButton.disabled = true; // 當剩餘車位為 0 時，禁用「車輛進入」按鈕
    } else {
        enterButton.disabled = false; // 否則啟用「車輛進入」按鈕
    }

    if (availableSpaces === totalSpaces) {
        exitButton.disabled = true; // 當所有車位都是空的時，禁用「車輛離開」按鈕
    } else {
        exitButton.disabled = false; // 否則啟用「車輛離開」按鈕
    }
}

檢查剩餘車位數量，根據情況決定是否禁用按鈕：
- 如果剩餘車位為 0，意味著停車場已滿，因此禁用進入按鈕。
- 如果所有車位都是空的，則禁用離開按鈕，因為沒有車輛可以離開。

5. 車輛進入事件處理

enterButton.addEventListener("click", function() {
    if (availableSpaces > 0) {
        availableSpaces--; // 減少剩餘車位
        logAction("車輛進入"); // 記錄車輛進入
        updateAvailableSpaces(); // 更新顯示的車位數量
    }
});

當點擊「車輛進入」按鈕時觸發此函數。
- 首先檢查剩餘車位是否大於 0，若大於 0，則減少剩餘車位數。
- 呼叫 logAction 函數來記錄此動作。
- 更新車位顯示區域，並啟動按鈕狀態檢查。

6. 車輛離開事件處理

exitButton.addEventListener("click", function() {
    if (availableSpaces < totalSpaces) {
        availableSpaces++; // 增加剩餘車位
        logAction("車輛離開"); // 記錄車輛離開
        updateAvailableSpaces(); // 更新顯示的車位數量
    }
});

當點擊「車輛離開」按鈕時觸發此函數。
- 檢查剩餘車位是否小於總車位，若小於，則增加剩餘車位數。
- 呼叫 logAction 函數來記錄此動作。
- 更新車位顯示區域，並啟動按鈕狀態檢查。

7. 記錄車輛進出

function logAction(action) {
    const listItem = document.createElement("li"); // 建立一個新的列表項目
    const timestamp = new Date().toLocaleTimeString(); // 取得當前時間
    listItem.textContent = `${action} - 時間: ${timestamp}`; // 設定列表項目的內容
    logList.appendChild(listItem); // 將項目添加到紀錄列表中
}

這個函數用來記錄每次車輛進出停車場的動作。
- 使用 document.createElement 創建一個新的 <li> 列表項目。
- 使用 new Date().toLocaleTimeString() 來取得當前時間，並將動作（車輛進入或車輛離開）和時間合併成一個字串。
- 最後將這個新的列表項目添加到 logList 裡，更新網頁上的紀錄列表。