day 17 javascript自動優化規劃行程系統

2024 iThome 鐵人賽

DAY 17

JavaScript

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

16th鐵人賽

neilsu02

2024-09-18 23:31:37

20 瀏覽

分享至

今天是第十七天我們可以寫一個javascript自動優化規劃行程系統，以便我們想做的事情太多而規劃好時間分配，以下是我的程式碼

1. HTML: 基本介面

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行程規劃系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>自動優化行程規劃</h1>

        <form id="tripForm">
            <div>
                <label for="location">景點名稱:</label>
                <input type="text" id="location" name="location" required>
            </div>
            <div>
                <label for="time">預計停留時間（小時）:</label>
                <input type="number" id="time" name="time" min="1" required>
            </div>
            <button type="button" id="addBtn">新增景點</button>
        </form>

        <h2>行程景點清單</h2>
        <ul id="locationList"></ul>

        <button id="optimizeBtn">優化行程</button>

        <h2>優化後的行程順序</h2>
        <ul id="optimizedList"></ul>
    </div>

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

2. CSS: 美化介面

body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
}

.container {
    width: 60%;
    margin: auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    color: #333;
}

form div {
    margin-bottom: 10px;
}

input {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #45a049;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    background-color: #eee;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
}

3. JavaScript: 自動優化邏輯

document.getElementById('addBtn').addEventListener('click', addLocation);
document.getElementById('optimizeBtn').addEventListener('click', optimizeTrip);

let locations = [];

// 新增景點
function addLocation() {
    const locationInput = document.getElementById('location');
    const timeInput = document.getElementById('time');

    const locationName = locationInput.value;
    const estimatedTime = parseInt(timeInput.value);

    if (locationName && estimatedTime) {
        locations.push({ locationName, estimatedTime });
        updateLocationList();
        locationInput.value = '';
        timeInput.value = '';
    }
}

// 更新景點清單顯示
function updateLocationList() {
    const locationList = document.getElementById('locationList');
    locationList.innerHTML = '';
    locations.forEach((loc, index) => {
        const li = document.createElement('li');
        li.textContent = `${loc.locationName} - 停留時間: ${loc.estimatedTime} 小時`;
        locationList.appendChild(li);
    });
}

// 優化行程（依據時間排序）
function optimizeTrip() {
    if (locations.length === 0) {
        alert('請先新增景點');
        return;
    }

    const optimizedList = [...locations];
    optimizedList.sort((a, b) => a.estimatedTime - b.estimatedTime);

    const optimizedListElement = document.getElementById('optimizedList');
    optimizedListElement.innerHTML = '';
    optimizedList.forEach((loc) => {
        const li = document.createElement('li');
        li.textContent = `${loc.locationName} - 停留時間: ${loc.estimatedTime} 小時`;
        optimizedListElement.appendChild(li);
    });
}

系統功能：

新增景點：使用者可以輸入景點名稱和預計停留時間。
景點清單顯示：將使用者輸入的景點顯示在頁面上。
行程優化：根據停留時間自動排序景點，確保較短的停留時間優先。

我會以javascript作為主要程式碼解說

1. `document.getElementById()` 和事件監聽器

document.getElementById('addBtn').addEventListener('click', addLocation);
document.getElementById('optimizeBtn').addEventListener('click', optimizeTrip);

這段代碼的意思是，我取得了頁面上兩個按鈕的元素：
- addBtn：當使用者點擊「新增景點」按鈕時，觸發 addLocation 函數。
- optimizeBtn：當使用者點擊「優化行程」按鈕時，觸發 optimizeTrip 函數。

2. `locations` 陣列

let locations = [];

這是一個空陣列，將用來儲存使用者新增的所有景點。每個景點都是一個物件，包含了景點名稱和預計停留時間。

3. `addLocation` 函數

function addLocation() {
    const locationInput = document.getElementById('location');
    const timeInput = document.getElementById('time');

    const locationName = locationInput.value;
    const estimatedTime = parseInt(timeInput.value);

    if (locationName && estimatedTime) {
        locations.push({ locationName, estimatedTime });
        updateLocationList();
        locationInput.value = '';
        timeInput.value = '';
    }
}

這個函數會在使用者點擊「新增景點」按鈕時執行。

首先，通過 document.getElementById() 取得輸入欄位的值：
- locationInput 取得景點名稱的輸入。
- timeInput 取得預計停留時間的輸入。
locationName 和 estimatedTime 是用來儲存這兩個輸入值的變數。
我們使用 if (locationName && estimatedTime) 檢查使用者是否輸入了有效的景點名稱和時間。
如果有效，使用 locations.push() 將景點（物件形式）推入 locations 陣列。物件的結構是 { locationName, estimatedTime }。
updateLocationList() 函數會更新頁面上的景點清單。
清空輸入欄位，讓使用者可以輸入下一個景點。

4. `updateLocationList` 函數

function updateLocationList() {
    const locationList = document.getElementById('locationList');
    locationList.innerHTML = '';
    locations.forEach((loc, index) => {
        const li = document.createElement('li');
        li.textContent = `${loc.locationName} - 停留時間: ${loc.estimatedTime} 小時`;
        locationList.appendChild(li);
    });
}

這個函數負責更新頁面上顯示的景點清單。

首先，使用 document.getElementById('locationList') 取得顯示景點清單的 <ul> 元素。
清空現有的清單 (locationList.innerHTML = '';)。
使用 locations.forEach() 迴圈來遍歷每個景點，然後動態創建 <li> 元素，並將其新增到 <ul> 中顯示出來。

5. `optimizeTrip` 函數

function optimizeTrip() {
    if (locations.length === 0) {
        alert('請先新增景點');
        return;
    }

    const optimizedList = [...locations];
    optimizedList.sort((a, b) => a.estimatedTime - b.estimatedTime);

    const optimizedListElement = document.getElementById('optimizedList');
    optimizedListElement.innerHTML = '';
    optimizedList.forEach((loc) => {
        const li = document.createElement('li');
        li.textContent = `${loc.locationName} - 停留時間: ${loc.estimatedTime} 小時`;
        optimizedListElement.appendChild(li);
    });
}

這個函數負責優化行程，並根據停留時間進行排序。

檢查 locations 陣列是否為空，如果使用者還未新增景點，則跳出警告訊息並結束函數執行 (return)。
使用 const optimizedList = [...locations] 建立一個 locations 的副本，這樣可以避免直接修改原始的陣列。
使用 optimizedList.sort() 函數根據 estimatedTime 對景點進行排序。sort() 方法接受一個回呼函數 (a, b)，通過比較 a.estimatedTime 和 b.estimatedTime 決定排序順序。
取得頁面上的 optimizedList 清單元素 (document.getElementById('optimizedList'))，並清空現有的清單。
使用 forEach() 迴圈來將排序後的景點依次新增到頁面的 <ul> 清單中，顯示出來。