一、整体概述
此 HTML 文件构建了一个恐龙餐厅的菜单页面，用户能够浏览菜品、将菜品添加到购物车，并进行支付操作。页面运用 HTML 搭建结构，CSS 进行样式设计，JavaScript 实现交互功能。
二、HTML 结构
1. 文档头部（<head>）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>恐龙餐厅菜单</title>
<style>
/* CSS 样式代码 */
</style>
</head>
<!DOCTYPE html>：声明文档类型为 HTML5。<html lang="zh-CN">：指定文档语言为中文（中国大陆）。<meta charset="UTF-8">：设置字符编码为 UTF - 8，确保中文等字符能正确显示。<meta name="viewport" content="width=device-width, initial-scale=1.0">：让页面在不同设备上能自适应显示。<title>恐龙餐厅菜单</title>：设置浏览器标签页的标题。<style>标签：包含页面的 CSS 样式代码。
2. 页面主体（<body>）
欢迎标题
html
<h1>欢迎来到恐龙餐厅</h1>
显示欢迎信息，字体颜色为绿色，居中显示。
购物车部分
html
<div class="cart">
<h2>购物车</h2>
<ul id="cart-items"></ul>
<p>总价：¥<span id="total-price">0</span></p>
<div class="payment">
<input type="number" id="payment-amount" placeholder="输入支付金额">
<button onclick="processPayment()">支付</button>
</div>
<p id="change-message"></p>
</div>
.cart类的<div>：作为购物车的容器。<ul id="cart-items">：用于显示购物车中的菜品列表。<span id="total-price">：显示购物车中菜品的总价。<input type="number" id="payment-amount">：让用户输入支付金额。<button onclick="processPayment()">：点击该按钮会调用processPayment()函数进行支付处理。<p id="change-message">：显示找零信息或支付错误提示。
菜单部分
html
<h1>菜单</h1>
<div class="menu">
<!-- 多个 .menu-item 元素 -->
</div>
<h1>菜单</h1>：显示菜单标题。.menu类的<div>：包含所有菜品信息。
菜品信息
html
<div class="menu-item" data-price="10">
<img src="icecream_banana.jpg" alt="冰淇淋香蕉船">
<div class="item-info">
<div class="item-name">冰淇淋香蕉船</div>
<div class="item-price">¥10</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
.menu-item类的<div>：表示一道菜品，data - price属性存储菜品价格。<img>标签：显示菜品图片。.item - info类的<div>：包含菜品名称和价格。<button onclick="addToCart(this)">：点击该按钮会调用addToCart()函数将菜品添加到购物车。
三、CSS 样式
1. 全局样式
css
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
设置页面主体的字体、最大宽度、居中显示和内边距。
2. 标题样式
css
h1 {
color: green;
text-align: center;
margin-bottom: 30px;
}
设置一级标题的颜色、居中显示和底部外边距。
3. 菜品样式
css
.menu-item {
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
.menu-item img {
width: 100px;
height: 100px;
margin-right: 20px;
border-radius: 10px;
}
.item-info {
flex-grow: 1;
}
.item-name {
font-weight: bold;
font-size: 18px;
}
.item-price {
color: #e67e22;
font-size: 16px;
}
.menu - item：使用 Flexbox 布局，设置菜品项的显示方式、底部边框和内边距。.menu - item img：设置菜品图片的宽度、高度、右边距和圆角。.item - info：让菜品信息区域自动填充剩余空间。.item - name：设置菜品名称的字体加粗和大小。.item - price：设置菜品价格的颜色和大小。
4. 购物车样式
css
.cart {
margin-top: 40px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
.cart h2 {
margin-top: 0;
}
设置购物车容器的外边距、内边距、边框和圆角，以及购物车标题的顶部外边距。
5. 支付部分样式
css
.payment {
margin-top: 20px;
}
.payment input {
padding: 5px;
margin-right: 10px;
}
.payment button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
设置支付区域的外边距、输入框和按钮的样式。
四、JavaScript 功能
1. 全局变量
javascript
let cart = [];
let total = 0;
cart：数组，用于存储购物车中的菜品信息。total：变量，用于存储购物车中菜品的总价。
2. addToCart() 函数
javascript
function addToCart(button) {
const item = button.parentElement;
const name = item.querySelector('.item-name').textContent;
const price = parseInt(item.getAttribute('data-price'));
cart.push({name, price});
total += price;
updateCartDisplay();
}
- 功能：将菜品添加到购物车。
- 步骤：
- 获取点击按钮所在的菜品项元素。
- 提取菜品名称和价格。
- 将菜品信息添加到
cart数组中，并更新总价。 - 调用
updateCartDisplay()函数更新购物车显示。
3. updateCartDisplay() 函数
javascript
function updateCartDisplay() {
const cartItems = document.getElementById('cart-items');
const totalPrice = document.getElementById('total-price');
cartItems.innerHTML = cart.map(item =>
`<li>${item.name} - ¥${item.price}</li>`
).join('');
totalPrice.textContent = total;
}
- 功能：更新购物车的显示内容和总价。
- 步骤：
- 获取购物车列表和总价元素。
- 将
cart数组中的菜品信息转换为 HTML 列表项，并更新购物车列表。 - 更新总价显示。
4. processPayment() 函数
javascript
function processPayment() {
const paymentAmount = parseInt(document.getElementById('payment-amount').value);
const changeMessage = document.getElementById('change-message');
if (isNaN(paymentAmount)) {
changeMessage.textContent = '请输入有效金额';
return;
}
if (paymentAmount < total) {
changeMessage.textContent = '支付金额不足';
return;
}
const change = paymentAmount - total;
changeMessage.textContent = `找零：¥${change}`;
// 重置购物车
cart = [];
total = 0;
updateCartDisplay();
document.getElementById('payment-amount').value = '';
}
- 功能：处理支付操作。
- 步骤：
- 获取用户输入的支付金额。
- 检查输入是否为有效数字，若不是则显示错误提示。
- 检查支付金额是否足够，若不足则显示错误提示。
- 计算找零并显示找零信息。
- 清空购物车，重置总价，更新购物车显示，并清空输入框。
分享
在代码说明文档中添加代码中使用的 CSS 样式的具体含义
为上述代码添加一个购物车功能的 JavaScript 脚本说明
说明如何在 HTML 中使用 CSS 样式来设计网页的布局和外观
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>恐龙餐厅菜单</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: green;
text-align: center;
margin-bottom: 30px;
}
.menu-item {
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
.menu-item img {
width: 100px;
height: 100px;
margin-right: 20px;
border-radius: 10px;
}
.item-info {
flex-grow: 1;
}
.item-name {
font-weight: bold;
font-size: 18px;
}
.item-price {
color: #e67e22;
font-size: 16px;
}
.cart {
margin-top: 40px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
.cart h2 {
margin-top: 0;
}
.payment {
margin-top: 20px;
}
.payment input {
padding: 5px;
margin-right: 10px;
}
.payment button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎来到恐龙餐厅</h1>
<div class="cart">
<h2>购物车</h2>
<ul id="cart-items"></ul>
<p>总价：¥<span id="total-price">0</span></p>
<div class="payment">
<input type="number" id="payment-amount" placeholder="输入支付金额">
<button onclick="processPayment()">支付</button>
</div>
<p id="change-message"></p>
</div>
<h1>菜单</h1>
<div class="menu">
<div class="menu-item" data-price="10">
<img src="icecream_banana.jpg" alt="冰淇淋香蕉船">
<div class="item-info">
<div class="item-name">冰淇淋香蕉船</div>
<div class="item-price">¥10</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="13">
<img src="dumpling.jpg" alt="韭菜猪肉饺子">
<div class="item-info">
<div class="item-name">韭菜猪肉饺子</div>
<div class="item-price">¥13</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="16">
<img src="pasta.jpg" alt="三文鱼意大利面">
<div class="item-info">
<div class="item-name">三文鱼意大利面</div>
<div class="item-price">¥16</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="16">
<img src="snail_soup.jpg" alt="法式蜗牛汤">
<div class="item-info">
<div class="item-name">法式蜗牛汤</div>
<div class="item-price">¥16</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="23">
<img src="pizza.jpg" alt="牛肉披萨">
<div class="item-info">
<div class="item-name">牛肉披萨</div>
<div class="item-price">¥23</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="5">
<img src="tomato_egg.jpg" alt="西红柿炒鸡蛋">
<div class="item-info">
<div class="item-name">西红柿炒鸡蛋</div>
<div class="item-price">¥5</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="7">
<img src="coke_chicken.jpg" alt="可乐鸡翅">
<div class="item-info">
<div class="item-name">可乐鸡翅</div>
<div class="item-price">¥7</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="dishu_xian.jpg" alt="地三鲜">
<div class="item-info">
<div class="item-name">地三鲜</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="pineapple_rice.jpg" alt="菠萝炒饭">
<div class="item-info">
<div class="item-name">菠萝炒饭</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="rainbow_corn.jpg" alt="彩虹玉米粒">
<div class="item-info">
<div class="item-name">彩虹玉米粒</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="10">
<img src="icecream_banana.jpg" alt="冰淇淋香蕉船">
<div class="item-info">
<div class="item-name">冰淇淋香蕉船</div>
<div class="item-price">¥10</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="13">
<img src="dumpling.jpg" alt="韭菜猪肉饺子">
<div class="item-info">
<div class="item-name">韭菜猪肉饺子</div>
<div class="item-price">¥13</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="16">
<img src="pasta.jpg" alt="三文鱼意大利面">
<div class="item-info">
<div class="item-name">三文鱼意大利面</div>
<div class="item-price">¥16</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="16">
<img src="snail_soup.jpg" alt="法式蜗牛汤">
<div class="item-info">
<div class="item-name">法式蜗牛汤</div>
<div class="item-price">¥16</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="23">
<img src="pizza.jpg" alt="牛肉披萨">
<div class="item-info">
<div class="item-name">牛肉披萨</div>
<div class="item-price">¥23</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="5">
<img src="tomato_egg.jpg" alt="西红柿炒鸡蛋">
<div class="item-info">
<div class="item-name">西红柿炒鸡蛋</div>
<div class="item-price">¥5</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="7">
<img src="coke_chicken.jpg" alt="可乐鸡翅">
<div class="item-info">
<div class="item-name">可乐鸡翅</div>
<div class="item-price">¥7</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="dishu_xian.jpg" alt="地三鲜">
<div class="item-info">
<div class="item-name">地三鲜</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="pineapple_rice.jpg" alt="菠萝炒饭">
<div class="item-info">
<div class="item-name">菠萝炒饭</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
<div class="menu-item" data-price="9">
<img src="rainbow_corn.jpg" alt="彩虹玉米粒">
<div class="item-info">
<div class="item-name">彩虹玉米粒</div>
<div class="item-price">¥9</div>
</div>
<button onclick="addToCart(this)">点餐</button>
</div>
</div>
</div>
<script>
let cart = [];
let total = 0;
function addToCart(button) {
const item = button.parentElement;
const name = item.querySelector('.item-name').textContent;
const price = parseInt(item.getAttribute('data-price'));
cart.push({name, price});
total += price;
updateCartDisplay();
}
function updateCartDisplay() {
const cartItems = document.getElementById('cart-items');
const totalPrice = document.getElementById('total-price');
cartItems.innerHTML = cart.map(item =>
`<li>${item.name} - ¥${item.price}</li>`
).join('');
totalPrice.textContent = total;
}
function processPayment() {
const paymentAmount = parseInt(document.getElementById('payment-amount').value);
const changeMessage = document.getElementById('change-message');
if (isNaN(paymentAmount)) {
changeMessage.textContent = '请输入有效金额';
return;
}
if (paymentAmount < total) {
changeMessage.textContent = '支付金额不足';
return;
}
const change = paymentAmount - total;
changeMessage.textContent = `找零：¥${change}`;
// 重置购物车
cart = [];
total = 0;
updateCartDisplay();
document.getElementById('payment-amount').value = '';
}
</script>
</body>
</html>
扫一扫
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
