这是一个简单的美团饮品店的网页，包含了商品列表、购物车和结算等功能。以下是代码的解析：
1. HTML部分：主要是页面的基本结构，包含头部、导航栏、商品列表、购物车、结算等部分。
2. CSS部分：主要是页面的样式设计，包含头部、导航栏、商品列表、购物车、结算等部分的布局和样式。
3. JavaScript部分：主要是页面的交互逻辑设计，包含商品的渲染、购物车的显示和隐藏、金额的统计、加减按钮的操作、清空购物车等功能。
其中，商品列表和已选商品列表的渲染采用了函数封装的方式，方便代码的复用和维护。购物车的显示和隐藏采用了CSS的display属性实现，金额的统计采用了全局变量保存数据的方式，加减按钮的操作和清空购物车的实现采用了数组的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美团</title>
<style>
* {
margin: 0;
padding: 0;
}
.head {
width: 100%;
height: 100px;
display: flex;
position: fixed;
top: 0;
background-color: #ffaa00;
}
.head p {
margin-left: 30px;
font-size: 80px;
line-height: 100px;
}
.head strong {
margin-left: 30px;
font-size: 60px;
line-height: 100px;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0px;
background-color: #d4d4d4;
}
.nav_one {
width: 100%;
height: auto;
text-align: center;
background-color: aliceblue;
}
.nav_one p {
font-size: 40px;
line-height: 80px;
}
.kong {
width: 100%;
height: 120px;
}
.box {
width: 100%;
height: auto;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.com {
width: 75%;
height: auto;
display: flex;
margin: 20px 0px;
}
.com_img {
width: 30%;
height: auto;
border-radius: 30px;
overflow: hidden;
}
.com_img img {
width: 100%;
height: 250px;
}
.com_box {
width: 65%;
height: auto;
margin-left: 5%;
}
.com_name {
font-size: 50px;
font-weight: bold;
}
.com_num {
width: 100%;
height: auto;
display: flex;
margin: 30px 0px;
}
.com_num p {
font-size: 30px;
width: 30%;
}
.com_price {
width: 90%;
height: auto;
display: flex;
justify-content: space-between;
}
.com_price strong {
font-size: 40px;
}
.com_quantity {
width: 30%;
height: auto;
display: flex;
justify-content: space-between;
}
.sub {
width: 30%;
height: 40px;
color: #ffaa00;
background-color: white;
font-weight: bold;
align-self: center;
line-height: 40px;
font-size: 40px;
border-radius: 10px;
}
.quantity {
width: 20%;
height: 40px;
text-align: center;
font-size: 40px;
}
.add {
width: 30%;
height: 40px;
color: #ffaa00;
background-color: #ffdb0e;
font-weight: bold;
align-self: center;
line-height: 40px;
font-size: 40px;
border-radius: 10px;
}
.footer {
width: 90%;
height: 100px;
margin: 20px 5%;
background-color: #3d3d3d;
border-radius: 50px;
position: fixed;
bottom: 0px;
display: flex;
justify-content: space-between;
z-index: 3;
}
.wm {
width: 60%;
margin-left: 5%;
display: flex;
position: relative;
}
.wm img {
width: 20%;
}
.red {
width: 30px;
height: 30px;
background-color: red;
color: white;
text-align: center;
position: absolute;
top: 30px;
left: 90px;
border-radius: 50px;
line-height: 30px;
}
.amount {
width: 50%;
font-size: 50px;
color: white;
margin-left: 5%;
line-height: 100px;
}
.yes {
width: 30%;
height: 100px;
border-radius: 0px 50px 50px 0px;
background-color: #ffff00;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 100px;
}
.selected {
width: 100%;
max-height: 60%;
height: auto;
background-color: white;
border-radius: 20px 20px 0px 0px;
position: relative;
position: fixed;
bottom: 0px;
z-index: 2;
padding-bottom: 140px;
overflow-y: auto;
}
.top {
width: 100%;
height: auto;
background-color: white;
display: flex;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #9c9c9c;
position: sticky;
top: 0px;
}
.clear {
width: 20%;
height: auto;
display: flex;
}
.clear img {
width: 20%;
height: auto;
}
.clear p {
width: 80%;
font-size: 30px;
}
.return {
width: 5%;
margin-right: 5%;
height: auto;
}
.return p {
width: 100%;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="head">
<p>‹</p>
<strong>饮品店</strong>
</div>
<div class="nav">
<div class="nav_one">
<p>奶茶系列</p>
</div>
</div>
<div class="kong"></div>
<div class="box" id="com">
<!-- 所有商品内容 -->
</div>
<div class="kong"></div>
<div class="footer">
<div class="wm" id="wm" onclick="trolley()">
</div>
<div class="yes">去结算</div>
</div>
<div class="selected" style="display: none;">
<div class="top">
<div class="clear" onclick="clear_none()">
<img src="./img/垃圾桶.png" alt="">
<p>清空购物车</p>
</div>
<div class="return" onclick="shut()">
<p>x</p>
</div>
</div>
<div class="select_com" id="select_com">
<!-- 已选商品内容 -->
</div>
</div>
<script>
let comment = document.getElementById('com');
let select_comment = document.getElementById('select_com');
let red = document.getElementById("red");
let amount = document.getElementById("amount");
let wm = document.getElementById("wm");
let selected = document.getElementsByClassName("selected")[0];
let total_num = 0;
let total_price = 0;
let data = [{
"name": "珍珠奶茶",
"img": "./img/4c798446c50c41c1b40df58e589fc236.jpeg",
"sell": "800",
"good": "98%",
"price": 8,
"quantity": 0
},
{
"name": "三拼奶茶",
"img": "./img/79a3a00f336b3191956a2bf73b5da284.jpg",
"sell": "500",
"good": "100%",
"price": 10,
"quantity": 0
},
{
"name": "奶茶全家桶",
"img": "./img/a9fdae6be7cda12dd30a76b317df2ee6.jpg",
"sell": "300",
"good": "100%",
"price": 15,
"quantity": 0
},
{
"name": "红豆奶茶",
"img": "./img/d26a8b7302f337b34ce7ef04911bdccc.jpeg",
"sell": "700",
"good": "98%",
"price": 10,
"quantity": 0
},
{
"name": "草莓奶茶",
"img": "./img/a03c91eed0fabc875da5f32663f1e46f.jpg",
"sell": "300",
"good": "99.99%",
"price": 10,
"quantity": 0
},
{
"name": "抹茶奶茶",
"img": "./img/e0f07c3e23bff28b3a7be1565f0b8ae5.jpeg",
"sell": "300",
"good": "96%",
"price": 10,
"quantity": 0
},
]
//页面商品的渲染\
com(data)
function com(arr) {
let str = '';
for (let i = 0; i < arr.length; i++) {
str += `
<div class="com">
<div class="com_img">
<img src="${arr[i].img}" alt="">
</div>
<div class="com_box">
<p class="com_name">${arr[i].name}</p>
<div class="com_num">
<p>月售${arr[i].sell}</p>
<p>好评${arr[i].good}</p>
</div>
<div class="com_price">
<strong>单价￥${arr[i].price}</strong>
<div class="com_quantity">
<button class="sub" onclick="sub(${i})" style="visibility: ${arr[i].quantity == 0 ? 'hidden' : ''};">-</button>
<p class="quantity" style="visibility: ${arr[i].quantity == 0 ? 'hidden' : ''};">${arr[i].quantity}</p>
<button class="add" onclick="add(${i})">+</button>
</div>
</div>
</div>
</div>
`;
}
comment.innerHTML = str;
}
//已选商品页面渲染
select_com(data);
function select_com(arr) {
let str = '';
for (let i = 0; i < arr.length; i++) {
if (arr[i].quantity == 0) {
} else {
str += `
<div class="com" style="width: 95%;margin: 10px auto;">
<div class="com_img">
<img src="${arr[i].img}" alt="">
</div>
<div class="com_box">
<p class="com_name">${arr[i].name}</p>
<div class="com_num">
<p>月售${arr[i].sell}</p>
<p>好评${arr[i].good}</p>
</div>
<div class="com_price">
<strong>单价￥${arr[i].price}</strong>
<div class="com_quantity">
<button class="sub" onclick="sub(${i})" style="visibility: ${arr[i].quantity == 0 ? 'hidden' : ''};">-</button>
<p class="quantity" style="visibility: ${arr[i].quantity == 0 ? 'hidden' : ''};">${arr[i].quantity}</p>
<button class="add" onclick="add(${i})">+</button>
</div>
</div>
</div>
</div>
`;
}
}
select_comment.innerHTML = str;
}
//金额总计
agg(data);
function agg(arr){
for(let i = 0; i < arr.length; i++){
total_price += parseFloat(arr[i].price) * parseFloat(arr[i].quantity);
total_num += parseFloat(arr[i].quantity);
}
}
//
//显示购物车
function trolley(){
let num = 0;
for(let i = 0; i < data.length; i++){
num += parseFloat(data[i].quantity);
}
if(num > 0){
selected.style.display = 'block';
}
}
//隐藏购物车
function shut(){
selected.style.display = 'none';
}
//表格底部统计
static();
function static(){
let str = '';
str = `
<img src="./img/外卖 (1).png" alt="">
<div class="red" id="red" style="display: ${total_num == 0 ? 'none' : 'inline-block'};">${total_num}</div>
<div class="amount" id="amount">￥${total_price}</div>
`;
total_num = 0;
total_price = 0;
wm.innerHTML = str;
}
//加号按钮
function add(a){
data[a].quantity += 1;
com(data);
select_com(data);
agg(data);
static();
}
//减号按钮
function sub(a){
data[a].quantity -= 1;
com(data);
select_com(data);
agg(data);
static();
let num = 0;
for(let i = 0; i < data.length; i++){
num += parseFloat(data[i].quantity);
}
if(num == 0){
selected.style.display = 'none';
}
}
//清空购物车
function clear_none(){
for(let i = 0; i < data.length; i++){
data[i].quantity = 0;
}
com(data);
select_com(data);
agg(data);
static();
shut();
}
</script>
</body>
</html>如上谢谢大家的观看
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
