在今日分享一个方美团做的页面，不具有什么违法效果，仅供演示只用
该代码是一个简单的购物车功能实现。通过使用XMLHttpRequest来发送异步请求，获取一个JSON格式的商品数据对象。然后通过遍历该对象，生成对应的HTML字符串，从而渲染商品列表。每个商品都有一个添加购物车按钮，点击该按钮可以将对应商品数量加1，并更新总数量和总价格。同时，在购物车区域中展示已添加的商品信息，可以增减商品数量，并实时更新总数量和总价格。
整个购物车功能的实现主要包括以下几个部分：
发送异步请求获取商品数据： 通过XMLHttpRequest发送GET请求，获取一个JSON格式的商品数据对象。
渲染商品列表： 遍历商品数据对象，通过生成HTML字符串的方式，将商品信息展示在页面上。
添加购物车功能： 点击商品列表中的“添加购物车”按钮，将对应商品数量加1，并更新总数量和总价格。
购物车展示功能： 点击购物车按钮，展示已添加的商品信息，并可以增减商品数量，实时更新总数量和总价格。
清空购物车功能： 点击清空购物车按钮，将所有商品数量置为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>?
谢谢大家的观看，谢谢了；?