批量订购预煮意大利面 - CSS

本文主要介绍如何利用CSS实现批量订购预煮意大利面的功能。

功能需求

我们需要实现一个预订系统，用户可以批量订购意大利面，包括选择面条种类、数量、加料等，并展示订单详情。

实现思路

HTML结构

我们需要先搭建页面布局，包括顶部导航栏、左侧菜单栏、中间菜单展示区域和右侧订单详情展示区域。

<header> <!-- 导航栏 -->
  <nav>
    <ul>
      <li>首页</li>
      <li>菜单</li>
      <li>关于我们</li>
    </ul>
  </nav>
</header>
<main> <!-- 主内容区 -->
  <aside> <!-- 左侧菜单栏 -->
    <h2>意大利面</h2>
    <ul>
      <li>经典番茄味</li>
      <li>奶油蘑菇味</li>
      <li>白酱菠菜味</li>
      <li>四种芝士味</li>
    </ul>
  </aside>
  <section> <!-- 中间菜单展示区域 -->
    ...
  </section>
  <aside> <!-- 右侧订单详情展示区域 -->
    ...
  </aside>
</main>

CSS样式

我们需要利用CSS来美化页面，并实现交互效果。

/* 导航栏 */
header {
    background: #eee;
    padding: 1rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin-right: 1rem;
}

/* 左侧菜单栏 */
aside {
    width: 20%;
    background: #f9f9f9;
    padding: 1rem;
    box-sizing: border-box;
}

aside h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

aside li {
    margin-bottom: 0.5rem;
    cursor: pointer;
}

aside li:hover {
    background: #f5f5f5;
}

/* 中间菜单展示区域 */
section {
    width: 60%;
    padding: 1rem;
    box-sizing: border-box;
}

/* 右侧订单详情展示区域 */
aside:last-of-type {
    width: 20%;
    background: #eee;
    padding: 1rem;
    box-sizing: border-box;
}

aside:last-of-type h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

aside:last-of-type ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

aside:last-of-type li {
    margin-bottom: 0.5rem;
}

JavaScript交互

最后，我们需要利用JavaScript来实现交互效果，包括菜单选择、数量增减、加料选择等。

//获取页面元素
const items = document.querySelectorAll("aside li");
const itemList = document.querySelector("section ul");
const orderList = document.querySelector("aside:last-of-type ul");
const submitBtn = document.querySelector("#submit-btn");
const quantityInput = document.querySelector("#quantity");
const toppings = document.querySelectorAll("input[type='checkbox']");

//定义变量
let selectedItems = []; //选中的菜单项

//设置菜单项点击事件
items.forEach((item, index) => {
    item.addEventListener("click", () => {
        if (!item.classList.contains("selected")) {
            item.classList.add("selected");
            selectedItems.push(index); //记录选中的菜单项
            let newItem = document.createElement("li");
            newItem.textContent = item.textContent;
            itemList.appendChild(newItem);
        }
    });
});

//数量改变事件
quantityInput.addEventListener("change", () => {
    let quantity = quantityInput.value;
    let existingItem = orderList.querySelector("[data-quantity]");

    if (existingItem) {
        existingItem.dataset.quantity = quantity;
        existingItem.querySelector(".quantity").textContent = quantity;
    } else {
        let item = document.createElement("li");
        item.dataset.quantity = quantity;
        item.innerHTML = `${selectedItems.length} x ${quantity} <span class="name">意大利面</span> <span class="quantity">${quantity}</span>`;
        orderList.appendChild(item);
    }
});

//添加/取消加料事件
toppings.forEach(topping => {
    topping.addEventListener("click", () => {
        let existingItem = orderList.querySelector("[data-toppings]");
        let toppingsArr = [];

        toppings.forEach(topping => {
            if (topping.checked) {
                toppingsArr.push(topping.value);
            }
        });

        if (existingItem) {
            if (toppingsArr.length) {
                existingItem.dataset.toppings = toppingsArr.join(",");
                existingItem.querySelector(".toppings").textContent = `(${toppingsArr.join(", ")})`;
            } else {
                existingItem.remove();
            }
        } else {
            if (toppingsArr.length) {
                let item = document.createElement("li");
                item.dataset.toppings = toppingsArr.join(",");
                item.innerHTML = "加料：" + "<span class='toppings'>" + `(${toppingsArr.join(", ")})` + "</span>";
                orderList.appendChild(item);
            }
        }
    });
});

//提交订单事件
submitBtn.addEventListener("click", () => {
    let order = [];

    selectedItems.forEach(index => {
        let item = items[index].textContent;
        order.push(item);
    });

    let toppingsArr = [];

    toppings.forEach(topping => {
        if (topping.checked) {
            toppingsArr.push(topping.value);
        }
    });

    let quantity = quantityInput.value;

    alert(`您的订单：${order.join(", ")}，数量：${quantity}${toppingsArr.length ? `, 加料：${toppingsArr.join(", ")}` : ""}`);
});

最终效果请参考附件demo.html和demo.css。

总结

通过本文的介绍，我们了解了如何利用HTML、CSS和JavaScript实现一个简单的批量订购预煮意大利面的系统。通过这个实例，我们掌握了HTML结构搭建、CSS样式设计和JavaScript交互实现等基本技能，为我们后续的学习和工作打下基础。