使用 JavaScript 构建房间成本估算器-js教程-PHP中文网

这个估算器会做什么？

允许用户选择房间类型（大床、特大号床或套房）。
让用户选择他们想要入住的晚数。
应用任何折扣（例如 AAA/高级或军事）。
计算房间费用、应用税费并显示总额。

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
    }
}

登录后复制