利用JavaScript实现淄博烧烤季点餐页面
时间: 2024-04-30 15:24:45 浏览: 12
好的,以下是一个简单的淄博烧烤季点餐页面的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淄博烧烤季点餐页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.item {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 20px;
padding: 20px;
width: 300px;
text-align: center;
}
.item img {
max-width: 100%;
margin-bottom: 20px;
}
.item h2 {
font-size: 1.5em;
margin-bottom: 15px;
}
.item p {
font-size: 1.2em;
margin-bottom: 15px;
}
.item select {
margin-bottom: 20px;
padding: 5px;
}
.item button {
background-color: #ff6600;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s;
}
.item button:hover {
background-color: #ff8533;
}
</style>
</head>
<body>
<h1>淄博烧烤季点餐页面</h1>
<div class="container">
<div class="item">
<img src="https://picsum.photos/300/200" alt="烤串">
<h2>烤串</h2>
<p>选择口味:</p>
<select name="flavor">
<option value="1">香辣</option>
<option value="2">孜然</option>
<option value="3">原味</option>
</select>
<p>选择数量:</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button>加入购物车</button>
</div>
<div class="item">
<img src="https://picsum.photos/300/200" alt="烤鱼">
<h2>烤鱼</h2>
<p>选择口味:</p>
<select name="flavor">
<option value="1">麻辣</option>
<option value="2">清蒸</option>
<option value="3">五香</option>
</select>
<p>选择数量:</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button>加入购物车</button>
</div>
<div class="item">
<img src="https://picsum.photos/300/200" alt="烤鸡翅">
<h2>烤鸡翅</h2>
<p>选择口味:</p>
<select name="flavor">
<option value="1">香辣</option>
<option value="2">孜然</option>
<option value="3">蜜汁</option>
</select>
<p>选择数量:</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button>加入购物车</button>
</div>
</div>
<script>
// 获取所有的加入购物车按钮
var addToCartButtons = document.querySelectorAll('.item button');
// 给每个按钮添加点击事件
addToCartButtons.forEach(function(button) {
button.addEventListener('click', function() {
// 获取当前商品名称、口味、数量
var itemName = this.parentNode.querySelector('h2').textContent;
var flavor = this.parentNode.querySelector('select[name="flavor"]').value;
var quantity = this.parentNode.querySelector('select[name="quantity"]').value;
// 将商品信息添加到本地存储中
var cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push({
itemName: itemName,
flavor: flavor,
quantity: quantity
});
localStorage.setItem('cart', JSON.stringify(cart));
// 弹出提示框
alert('成功加入购物车!');
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 HTML、CSS 和 JavaScript 来实现一个简单的淄博烧烤季点餐页面。页面中包含三个商品,每个商品包含商品图片、商品名称、口味选择下拉框、数量选择下拉框和加入购物车按钮。当用户点击加入购物车按钮时,我们将商品的名称、口味和数量存储到本地存储中,并弹出一个提示框告诉用户添加成功。这些商品信息将用于购物车页面的展示和计算总价等操作。