今天是第十七天我們可以寫一個javascript自動優化規劃行程系統，以便我們想做的事情太多而規劃好時間分配，以下是我的程式碼
<!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>
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;
}
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作為主要程式碼解說
document.getElementById() 和事件監聽器document.getElementById('addBtn').addEventListener('click', addLocation);
document.getElementById('optimizeBtn').addEventListener('click', optimizeTrip);
addBtn：當使用者點擊「新增景點」按鈕時，觸發 addLocation 函數。optimizeBtn：當使用者點擊「優化行程」按鈕時，觸發 optimizeTrip 函數。locations 陣列let locations = [];
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() 函數會更新頁面上的景點清單。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> 中顯示出來。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> 清單中，顯示出來。addLocation() 函數負責將使用者輸入的景點和時間新增到 locations 陣列中，並在頁面上顯示出來。updateLocationList() 函數會根據 locations 陣列的內容，更新頁面上的景點清單。optimizeTrip() 函數負責根據景點的停留時間，將景點進行排序並顯示在頁面上，優化行程。
iThome鐵人賽
看影片追技術