分享项目练习作复盘之用

在今日分享一个方美团做的页面，不具有什么违法效果，仅供演示只用

该代码是一个简单的购物车功能实现。通过使用XMLHttpRequest来发送异步请求，获取一个JSON格式的商品数据对象。然后通过遍历该对象，生成对应的HTML字符串，从而渲染商品列表。每个商品都有一个添加购物车按钮，点击该按钮可以将对应商品数量加1，并更新总数量和总价格。同时，在购物车区域中展示已添加的商品信息，可以增减商品数量，并实时更新总数量和总价格。

整个购物车功能的实现主要包括以下几个部分：

1. 发送异步请求获取商品数据： 通过XMLHttpRequest发送GET请求，获取一个JSON格式的商品数据对象。

2. 渲染商品列表： 遍历商品数据对象，通过生成HTML字符串的方式，将商品信息展示在页面上。

3. 添加购物车功能： 点击商品列表中的“添加购物车”按钮，将对应商品数量加1，并更新总数量和总价格。

4. 购物车展示功能： 点击购物车按钮，展示已添加的商品信息，并可以增减商品数量，实时更新总数量和总价格。

5. 清空购物车功能： 点击清空购物车按钮，将所有商品数量置为0，并更新总数量和总价格。

在代码中，还涉及一些DOM操作和事件监听处理，以及一些变量的定义和赋值。细节部分需要根据实际需求进行调整和完善。

let xhr = new XMLHttpRequest();
// 创建 XMLHttpRequest 对象、、、XMLHttpRequest是js已经封装好的函数事件
xhr.open('get', 'js/index.json', true);
// 设置请求方法（get或ost）、URL（json文件路径） 和是否异步（true或false）
xhr.send();
//发送要请求的要求
xhr.onreadystatechange = function() {
	// 监听函数来监听请求状态变化
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 当状态为完成（第四步）并且请求成功时（200为请求成功状态码）
		let text = xhr.responseText;
		// 获取响应的文本内容
		data = JSON.parse(text);
		// 将文本内容解析为 JSON 对象
		item(data);
		//调用渲染函数
		increase(data);
		//赋值一个变量为最大id
	}
};
let data = [];
// 获取所有可用元素
let BottonNum = document.getElementsByClassName('shopRightBottonNum')[0];
// let shops = document.getElementsByClassName('shops')[0];+
let amount = document.getElementsByClassName('amount')[0];
let clearImg = document.getElementsByClassName('clearImg')[0];
let clearImgone = document.getElementsByClassName('clearImgone')[0];
let hints = document.getElementById('hints');
let hint = document.getElementById('hint');

//总数量
let totalPrice = document.getElementsByClassName('totalPrices')[0];
let nulls = document.getElementsByClassName('nulls')[0];
let itemsShop;
let nums;
//总价格
let totalPrices;
//总数量
function item(data) {
	nums = 0;
	//总数量
	totalPrices = 0;
	//总价格
	let str = '';
	let strs = '';
	// 遍历 JSON 对象生成 HTML 字符串
	for (let i = 0; i < data.length; i++) {
		str += `
				<div class="shop">
					<div class="shopLeft">
						<img src="${data[i].img}" alt="" />
					</div>
					<div class="shopRight">
						<div class="shopRighttop">
							<p>${data[i].name}</p>
						</div>
						<div class="shopRightBotton">
							<p>￥：${data[i].price}</p>
							`;
		if (data[i].num == 0) {
			str += `
								<div class="shopRightBottonNum">
									<p onclick="increase(${i},${1})">添加购物车</p>
								</div>`
		} else if (data[i].num > 0) {
			str += `
								<button class="reduce" onclick="increase(${i},${2})">-</button>
								<div class="Prices">${data[i].num}</div>
								<button class="add" onclick="increase(${i},${1})">+</button>
`
			strs += `
		<div class="shops" >
			<div class="shopLeft">
				<img src="${data[i].img}" alt="" />
			</div>
			<div class="shopRight">
				<div class="shopRighttop">
					<p>${data[i].name}</p>
				</div>
				<div class="shopRightBotton">
					<p class="prices">￥：${data[i].price}</p>
					<button class="price" id="redele" onclick="increase(${i},${2})">-</button>
				<div class="num">${data[i].num}</div>
					<button class="add" onclick="increase(${i},${1})">+</button>
				</div>
			</div>
		</div>`
		};


		str += `</div>
					</div>
				</div>
				`
	}
	document.getElementsByClassName('sopws')[0].innerHTML = strs;
	document.getElementsByClassName('shopw')[0].innerHTML = str;
}
//加入购物车++--事件
function increase(a, type) {
	if (type == 1) {
		data[a].num++;
	} else if (type == 2) {
		if (data[a].num > 0) {
			data[a].num--;
			nulls.style.display = 'none';
		} else if (data[a].num == 0) {
			alert('不能在减了');
			hint.style.display = 'none';
			nulls.style.height= '1000px';
		}
	}
	item(data);
	calculate(data);
};

function calculate(datas) {
	for (let i = 0; i < data.length; i++) {
		totalPrices += parseFloat((datas[i].price * datas[i].num));
		//总价格=单价*数量（所有的数量）
		nums += parseInt(datas[i].num);
	}
	document.getElementsByClassName('TotalPrices')[0].innerHTML = totalPrices;
	document.getElementsByClassName('amount')[0].innerHTML = nums;
	item(data);
};
//购物车开启
function shops() {
	console.log(nums);
	if (nums == 0) {
		hint.style.display = 'none';
		nulls.style.display = 'none';
	}
	for (let i = 0; i < data.length; i++) {
		console.log(data[i]);
		if (data[i].num > 0) {
			hint.style.display = 'block';
			nulls.style.display = 'block';
		}
	}

	item(data);
};
//购物车关闭
function closesfy() {
	if (nums == 0) {
		hint.style.display = 'none';
		nulls.style.display = 'none';
	}
	return;
	item(data);
}

function empty() {
	for (let i = 0; i < data.length; i++) {
		if (data[i].num == 0 && data[i].num == null) {
			hint.style.display = null;
			nulls.style.display = null;
			
		} else if (data[i].num > 0) {
			data[i].num = 0;
			hint.style.display = 'none';
			nulls.style.display = 'none';
		}
	}
	calculate(data);
	// increase(data);
	// // 刷新商品列表展示
	item(data);
}

js样式

 

 html样式不太好看，可以自己优化下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>美团购物车</title>
		<style>
			/* 头部 */
			* {
				margin: 0;
				padding: 0;
			}

			.left {
				width: 100%;
				height: 50px;
				top: 0;
				display: flex;
				background-color: #FFFFFF;
			}

			.left img {
				width: 5%;
				margin: 26px 11px;
				height: 40%;
			}

			.left input {
				width: 79%;
				height: 20px;
				line-height: 32px;
				text-align: center;
				font-size: 18px;
				border-radius: 15px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-top: 25px;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			/* 内容 */
			.shopw {
				width: 100%;
				height: 2000px;
			}

			.shop {
				width: 100%;
				margin-top: 4%;
				height: 180px;
				display: flex;
			}

			.shops {
				width: 100%;
				height: 180px;
				display: flex;
			}

			.sopws {
				width: 100%;
				height: 150px;
				overflow-y: scroll;
			}

			.shopLeft {
				width: 45%;
				height: 150px;
			}

			.shopLefts {
				width: 45%;
				height: 150px;
			}

			.shopLefts img {
				width: 85%;
				padding: 10px;
				border-radius: 15px;
				height: 150px;
			}

			.shopLeft img {
				width: 95%;
				padding: 10px;
				border-radius: 15px;
				height: 150px;
			}

			.shopRight {
				width: 60%;
				height: 150px;
				padding: 2px;
			}

			.shopRighttop {
				width: 90%;
				margin-left: 4%;
			}

			.shopRighttop p {
				padding: 2px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-top: 5px;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.shopRightBotton {
				/* width: 98%; */
				margin-right: 15px;
				margin-top: 21%;
				display: flex;
			}

			.shopRightBotton p {
				width: 50%;
				color: #ff0000;
				margin-left: 1%;
				line-height: 35px;
				/* text-align: center; */
			}

			.shopRightBottonNum {
				width: 75%;
				height: 35px;
				line-height: 35px;
				display: flex;
				text-align: center;
			}

			.cart {
				z-index: 99;
			}

			.reduce {
				width: 15%;
				height: 30px;
			}

			.shopRightBottonNum p {
				width: 70%;
				margin-left: 20%;
				color: #fff;
				background-color: #ffb300;
				text-align: center;
			}

			.Price {
				width: 15%;
				height: 30px;
			}

			.add {
				width: 15%;
				height: 30px;
			}

			.footer {
				display: flex;
				position: fixed;
				bottom: 0px;
				margin-top: 100px;
				background-color: #FFFFFF;
				width: 100%;
				height: 55px;
			}

			.footerLeft {
				width: 25%;
				position: flex;
				display: flex;
				height: 55px;
			}

			.footerLeft img {
				width: 70%;
				height: 45px;
			}

			.footerLeft div {
				width: 20%;
				line-height: 55px;
				height: 55px;
			}

			.footerRight {
				width: 80%;
				height: 55px;
				display: flex;
				background-color: #ffb300;
			}
			.unit{
				width:10%;
				display: flex;
				line-height: 55px;
				text-align: center;
				color: #ffffff;
			}
			.inTotal{
				width: 40%;
				display: flex;
				line-height: 55px;
				text-align: center;
				color: #ffffff;
			}
			.TotalPrices{
				width: 45%;
				line-height: 55px;
				text-align: center;
				color: #ffffff;
			}

			/* .footerRight div{
				width: 50%;
				line-height: 55px;
				text-align: center;
				color: #ff0000;
			} */

			#hint {
				width: 100%;
				height: 200px;
				display: none;
				position: fixed;
				bottom: 55px;
				/* margin-bottom: 185px; */
				justify-content: center;
				background-color: #fafafa;
			}

			#hints {
				width: 100%;
				height: 400px;
				display: none;
				background-color: #fafafa;
			}

			.clear {
				padding: 10px;
				height: 13px;
				display: flex;
				width: 100%;
			}

			.clear p {
				width: 25%;
				border-radius: 15px;
				background-color: #00fdfd;
				text-align: center;
				height: 20px;
			}

			.clearImg {
				margin-left: 65%;
				width: 5%;
			}

			.clearImgone {
				margin-left: 65%;
				width: 5%;
			}

			.clearImgone img {
				text-align: center;
				width: 50%;
			}

			#redele {
				width: 15%;
				height: 30px;
			}
			.nulls{
				width: 100%;
				/* height: 260px; */
				display: none;
				margin-bottom: 200px;
			}
			.shopw{
				overflow-y: scroll;
			}
		</style>
	</head>
	<body>
		<!-- 顶层 -->
		<div class="left">
			<img src="./img/左 左.png" alt="">
			<input type="text" placeholder="请输入商品" />
			<img src="./img/省略号.png" alt="" />
		</div>
		<!-- 内容 -->
		<div class="shopw">
			<!-- <div class="shop">

			</div> -->
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footerLeft"  onclick="shops()">
				<img src="./img/MBE风格常用图标-购物.png" alt="" />
				<div class="amount">0</div>
			</div>
			<div class="footerRight">
				<div class="inTotal">一共花费：</div>
				<p class="TotalPrices">100</p>
				<div class="unit">元</div>
			</div>
		</div>
		<div class="nulls">
					
		</div>
		<!-- 提示 -->
		<div id="hint">
			<div class="clear">
				<p onclick="empty(1)">清空购物车</p>
				<div class="clearImgone" onclick="closesfy()">
					<img src="./img/cha.png" alt="" />
				</div>
			</div>
			<div class="sopws">
				<div class="shops" >
					<div class="shopLeft">
						<img src="${datas[i].img}" alt="" />
					</div>
					<div class="shopRight">
						<div class="shopRighttop">
							<p class="numsfy">12546</p>
						</div>
						<div class="shopRightBotton">
							<p>111</p>
							<button class="reduce" id="redele" onclick="increase(${i},${2})">-</button>
							<div class="Prices">0</div>
							<button class="add" onclick="increase()">+</button>`
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="hints">
		</div>
	</body>
	<script src="./js/index.js"></script>
</html>

 

谢谢大家的观看，谢谢了；