使用 JavaScript 建立房間成本估算器

這個估算器會做什麼？

1. 允許使用者選擇房間類型（大床、加大雙人床或套房）。
2. 讓使用者選擇想要入住的晚數。
3. 會應用任何折扣（例如 AAA/高級或軍事）。
4. 計算房間費用、應用稅費並顯示總金額。

---

STEP_1：處理表單提交

首先，我們需要捕獲使用者在表單中提交的內容。我們將使用 JavaScript 來防止頁面在提交表單時刷新，從而使我們能夠在不丟失輸入的情況下處理計算。

document.getElementById("costForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevents the page from reloading

    // 1. Get the values from the form
    const name = document.getElementById("name").value;
    const checkInDate = document.getElementById("checkInDate").value;
    const nights = parseInt(document.getElementById("nights").value);
    const roomType = document.querySelector('input[name="roomType"]:checked').value;
    const discount = document.querySelector('input[name="discount"]:checked').value;
    const adults = parseInt(document.getElementById("adults").value);
    const children = parseInt(document.getElementById("children").value);

    // 2. Check room occupancy
    const maxOccupancy = getMaxOccupancy(roomType);
    if (adults + children > maxOccupancy) {
        document.getElementById("messageDiv").innerText = `The room you selected cannot hold your group. Max occupancy is ${maxOccupancy}.`;
        return;
    }

    // 3. Clear previous messages and calculate the cost
    document.getElementById("messageDiv").innerText = "";
    calculateCost(roomType, checkInDate, nights, discount);
});

它的作用：

• 表單提交：表單監聽「提交」事件，event.preventDefault() 會阻止頁面刷新，以便我們可以使用 JavaScript 處理輸入。
• 取得表單值：我們從表單中擷取數值，例如使用者姓名、入住天數、房間類型等
• 房間入住率檢查：我們使用一個函數來檢查客人人數是否超過房間的最大入住率。如果是這樣，我們會顯示一條錯誤訊息。

---

STEP_2：檢查最大入住人數

現在，讓我們建立一個函數來檢查每種房型可以入住的人數。這個功能很重要，因為飯店房間對可容納的客人數量有限制。

function getMaxOccupancy(roomType) {
    if (roomType === "queen") {
        return 5; // Queen rooms can hold up to 5 people
    } else if (roomType === "king") {
        return 2; // King rooms can hold up to 2 people
    } else if (roomType === "suite") {
        return 6; // 2-Bedroom Suites can hold up to 6 people
    }
}

它的作用：

• 房型：每種房型（大床房、加大雙人床房、套房）都有不同的最大入住人數。
  • 大床房：最多入住5人。
  • 加大雙人床間：最多可入住 2 人。
  • 套房：最多可入住 6 人。
• 如果成人兒童的數量超過限制，我們會顯示錯誤並停止計算。

---

STEP_3：依日期計算房價

接下來，我們根據入住日期和房間類型計算每晚房價。旺季（六月至八月）的費率較高，其餘時間則較低。

document.getElementById("costForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevents the page from reloading

    // 1. Get the values from the form
    const name = document.getElementById("name").value;
    const checkInDate = document.getElementById("checkInDate").value;
    const nights = parseInt(document.getElementById("nights").value);
    const roomType = document.querySelector('input[name="roomType"]:checked').value;
    const discount = document.querySelector('input[name="discount"]:checked').value;
    const adults = parseInt(document.getElementById("adults").value);
    const children = parseInt(document.getElementById("children").value);

    // 2. Check room occupancy
    const maxOccupancy = getMaxOccupancy(roomType);
    if (adults + children > maxOccupancy) {
        document.getElementById("messageDiv").innerText = `The room you selected cannot hold your group. Max occupancy is ${maxOccupancy}.`;
        return;
    }

    // 3. Clear previous messages and calculate the cost
    document.getElementById("messageDiv").innerText = "";
    calculateCost(roomType, checkInDate, nights, discount);
});

它的作用：

• 日期計算：我們使用 JavaScript Date 物件從入住日期中提取月份。
• 旺季（六月至八月）：這幾個月的價格較高。
  • 大床間和加大雙人床房：每晚 250 美元。
  • 套房：每晚 350 美元。
• 淡季（一年中的剩餘時間）：價格較低。
  • 大床間和加大雙人床房：每晚 150 美元。
  • 套房：每晚 210 美元。

---

STEP_4：計算總成本

最後，我們計算一下住宿的總費用。我們應用所有折扣，然後加稅以獲得最終總額。

function getMaxOccupancy(roomType) {
    if (roomType === "queen") {
        return 5; // Queen rooms can hold up to 5 people
    } else if (roomType === "king") {
        return 2; // King rooms can hold up to 2 people
    } else if (roomType === "suite") {
        return 6; // 2-Bedroom Suites can hold up to 6 people
    }
}

它的作用：

• 房價：我們使用 getRoomRate() 函數計算每晚的房價。
• 總房價：我們將房價乘以住宿天數，得到折扣前的總費用。
• 應用折扣：如果用戶選擇AAA/高級或軍事，我們將應用折扣（分別為10%或20%）。
• 稅金：我們在折扣房費的基礎上加收 12% 的稅費。
• 顯示結果：頁面上顯示總費用（包含明細）供使用者查看。

---

結論

• 1.取得表單值：當使用者提交表單時，代碼會先從表單中取得所有輸入值（姓名、入住日期、入住天數等）。
• 2.驗證入住率：腳本檢查客人數量是否超過房間的最大入住率，如果超過則顯示錯誤。
• 3.計算房間費用：根據所選的房間類型和入住日期，腳本計算每晚房價，將其乘以住宿天數，然後應用任何折扣。
• 4.加稅：腳本在折扣房費的基礎上加 12% 的稅。
• 5.顯示結果：最終成本（包含明細）在結果部分顯示給使用者。

就是這樣！我們使用 JavaScript 建立了一個簡單但實用的 房間成本估算器。

我的此程式碼的 GitHub 儲存庫在這裡！包括頁面的基本 HTML 和 Bootstrap 樣式

作者

桑尼柯

創意開發者與設計師

前端開發學生 |團結起來

---

以上是使用 JavaScript 建立房間成本估算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！