功能分析：

1、实现单选和全选

2、实现商品数量的加减和输入，小计金额和总件数也跟着发生改变，以及判断是否选中

3、实现选中商品金额总计

4、可以删除商品，删除商品后的总件数以及已选择件数，和总金额的改变

5、可以加入购物车，加入购物车后的总件数的改变，以及拥有相应的功能

1、HTML相关代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米购物车,打死不改</title><link rel="stylesheet" href="https://at.alicdn.com/t/font_2329460_legvgzs3jvm.css"><script src="js/mi.js"></script><link rel="stylesheet" href="css/mi.css">
</head><body><div class="center"><table><tbody class="tb"><tr class="thead"><td class="fist"><i class="iconfont icon-succ all"></i> 全选</td><td class="simg"></td><td class="shopName">商品名称</td><td class="price">单价</td><td class="number">数量</td><td class="count">小计</td><td class="op">操作</td></tr></tbody></table></div><div class="crta"><div class="c-left"><a href="#" class="back-shopping">继续购物</a><span class="cart-total">共<i class="c-number">3</i> 件商品，已选择<i class="g-number">0</i>件</span></div><div class="total-price"><span>合计：<em>0</em>元</span><div class="noTip">请勾选需要结算的商品</div><a href="javascript:" class="close btn-disabled">去结算</a></div></div><div class="content"><h2 class="shoptitle"><span class="title">买购物车中商品的人还买了</span></h2><div class="shop-all"><ul class="shopList clearfix"></ul></div></div></html>

2、css样式代码

* {margin: 0;padding: 0;
}a {text-decoration: none;
}tr,
td {box-sizing: border-box;
}body {background-color: #f5f5f5;
}.center {width: 1226px;margin: 0 auto;padding-top: 50px;margin-top: 100px;background-color: #fff;border-top: 2px solid #ff6700;
}table {border-collapse: collapse;
}.c {width: 110px;
}.simg {width: 120px;
}.icon-succ {display: inline-block;width: 18px;height: 18px;line-height: 18px;border: 1px solid #e0e0e0;margin-left: 24px;margin-right: 20px;background-color: #fff;color: #fff;font-size: 16px;text-align: center;vertical-align: middle;position: relative;top: -1px;cursor: pointer;
}/* 悬停 */.icon-succ:hover {color: #757575;
}table .tb .btn {background-color: #ff6700;color: #fff;
}.thead {width: 1226px;height: 70px;color: #424242;font-size: 16px;
}.thead tr {height: 70px;
}.shopName {width: 380px;
}.number {text-align: center;width: 150px;
}.price {text-align: center;width: 158px;
}.count {text-align: center;width: 201px;box-sizing: border-box;
}.op {text-align: center;width: 80px;
}/* tr边框 */.tlist {padding: 15px 26px 15px 0;border-top: 1px solid #e0e0e0;height: 117px;box-sizing: border-box;
}/*计数框 */.nu {border: 1px solid #e0e0e0;height: 38px;width: 100%;display: flex;text-align: center;justify-content: space-between;position: relative;
}.nu .msg {position: absolute;width: 100%;left: 0;bottom: -24px;font-size: 12px;color: #b0b0b0;display: none;
}/* 加减 */.nu span {font-size: 12px;width: 40px;height: 38px;font-weight: bold;display: inline-block;line-height: 40px;
}.nu span:hover {background-color: #e0e0ee;transition: all 0.3s;
}.numbers {margin-right: 40px;
}/*  */.shopNumber {width: 72px;height: 38px;line-height: 38px;padding: 0;border-width: 0;color: #424242;font-size: 16px;outline: none;text-align: center;
}.clear::after {content: "";display: block;clear: both;
}/* 文字说明 */.titles {font-size: 18px;font-weight: 400;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}/* 删除 */.ic {color: #ff6700;
}.icon-X- {width: 24px;height: 24px;display: inline-block;line-height: 24px;border-radius: 12px;font-size: 12px;font-weight: bold;color: #757575;transition: all 0.3s;
}.icon-X-:hover {color: #fff;background-color: #e53935;
}/* 购物选项 */.crta {width: 1226px;height: 50px;margin: 0 auto;text-align: center;display: flex;background-color: #fff;justify-content: space-between;align-items: center;font-size: 14px;color: #757575;margin-top: 30px;
}i {font-style: normal;
}.c-left {height: 50px;font-size: 14px;color: #757575;text-align: center;display: flex;align-items: center;
}/* 继续购物 */.c-left .back-shopping {height: 16px;margin-left: 32px;width: 56px;transition: color 0.3s;display: inline-block;font-size: 14px;color: #757575;
}/* 悬停变色 */.c-left .back-shopping:hover {color: #ff6700;
}.cart-total {margin-left: 16px;padding-left: 16px;border-left: 1px solid #eee;color: #757575;display: inline-block;box-sizing: border-box;
}.cart-total i {color: #ff6700;
}/* 合计 */.total-price {height: 50px;color: #ff6700;position: relative;
}.total-price em {font-style: normal;font-size: 30px;
}.total-price span {text-align: right;display: inline-block;
}.total-price .close {width: 200px;height: 48px;display: inline-block;line-height: 48px;font-size: 18px;margin-left: 50px;vertical-align: top;
}.btn-disabled {background: #e0e0e0;border-color: #e0e0e0;color: #b0b0b0;cursor: default;
}.total-price .btn-close {padding-left: 13px;color: #ff6700;background: #ff6700;border-color: #ff6700;color: #fff;
}/* 勾选 */.noTip {width: 200px;height: 48px;line-height: 48px;position: absolute;top: -58px;right: 0;background-color: #fff;border: 1px solid #ff6700;color: #ff6700;text-align: center;
}.noTip::before {content: "";bottom: -8px;margin-left: -10px;border-width: 8px 10px 0;border-color: #ff6700 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);z-index: 1;display: block;width: 0px;height: 0px;border-style: solid dashed dashed;position: absolute;left: 50%;
}.noTip::after {content: "";bottom: -7px;margin-left: -8px;border-width: 7px 8px 0;border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);z-index: 2;display: block;width: 0px;height: 0px;border-style: solid dashed dashed;position: absolute;left: 50%;
}/* 还买了模块 */.content {width: 1226px;margin: 0 auto;text-align: center;margin-top: 60px;
}.shoptitle {position: relative;margin: 0;height: 50px;font-size: 30px;font-weight: 400;color: #757575;border-top: 1px solid #e0e0e0;
}.title {position: absolute;top: -20px;left: 372px;height: 40px;width: 482px;line-height: 40px;text-align: center;display: block;background-color: #f5f5f5;
}/* 商品列表 */.shop-all {width: 1226px;height: 628px;
}.shopitem {float: left;width: 234px;height: 300px;padding: 0 20px;margin: 0 0 14px 14px;padding: 0;position: relative;overflow: hidden;list-style: none;background-color: #fff;text-align: center;color: #757575;
}/* 商品列表 */.shopitem img {display: block;margin: 40px auto 20px;width: 140px;height: 140px;
}.shopList {margin: 0 0 0 -14px;height: 628px;
}.shop-name {margin: 0 10px 10px;height: 18px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #333;
}.shop-price {margin-bottom: 10px;color: #ff6700;
}.shop-tips {color: #757575;font-size: 14px;
}.action {width: 118px;border: 1px solid #ff6700;background: #fff;color: #ff6700;height: 28px;position: absolute;left: 50%;height: 28px;font-size: 12px;line-height: 28px;margin-left: -64px;bottom: -40px;transition: all .3s;
}.shopitem:hover .action {bottom: 15px;
}.action:hover {background-color: #ff6700;color: #fff;
}

3、js相关代码

window.onload = function() {// 获取tbody节点var tbody = document.querySelector(".tb");// 总价var em = document.querySelector(".total-price em");var gnumber = document.querySelector(".g-number");// 总数量var cNumber = document.querySelector(".c-number");// 获取结算按钮var close = document.querySelector(".close");// 件数var ja;// 勾选var noTip = document.querySelector(".noTip");// 自动生成商品var arr = [{img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1560222640.90428593.jpg?thumb=1&w=80&h=80",titles: "小米「小爱老师」 4G网络尊享版 白色",price: "999元",count: "999元"},{img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1543561468.82116708.jpg?thumb=1&w=80&h=80",titles: "小黑鲨游戏 Type-C 耳机 黑色",price: "99元",count: "99元"},{img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1464615180.86261317.jpg?thumb=1&w=80&h=80",titles: "米兔智能故事机 白色",price: "199元",count: "199元"},]var strs = "";for (var i = 0; i < arr.length; i++) {var imgsrc = arr[i].img;var titles = arr[i].titles;var itemprice = arr[i].price;var count = arr[i].count;strs +=`<tr class="tlist"><td class="c"><span class="iconfont icon-succ item"></span></td><td class="simg"><img src="${imgsrc}" alt="" /></td><td class="titles">${titles}</td><td class="price">${itemprice}</td><td class="number numbers"><div class="nu"><span class="iconfont icon-jianhao"></span><input type="text" value="1" class="shopNumber"/><span class="iconfont icon-hao"></span><div class="msg"></div></div></td><td class="count ic">${count}</td><td class="op"><span class="iconfont icon-X-"></span></td></tr>`}tbody.innerHTML += strs;// 全选按钮var all = document.querySelector(".all");//给tobdy添加点击事件，委托tbody.onclick = function(event) {var event = event || window.event;var target = event.target || event.srcElement;// 小计价格if (target.className == "iconfont icon-jianhao" ||target.className == "iconfont icon-hao") {var numa = target.parentNode;// 还可以购买var msg = numa.querySelector(".msg");ja = parseInt(numa.children[1].value);if (target.className == "iconfont icon-jianhao") {ja = ja - 1;} else if (target.className == "iconfont icon-hao") {ja = ja + 1;}if (ja == 0) {alert("修改数量不能小于1")ja = 1;} else if (ja == 1) {msg.style.display = "none";} else if (ja > 1 && ja < 10) {msg.style.display = "block";msg.innerHTML = "还可以购买10件以上";} else if (ja >= 10 && ja < 20) {msg.style.display = "block";msg.innerHTML = "还可以购买" + (20 - ja) +"件";} else if (ja == 20) {msg.style.display = "none";} else if (ja > 20) {alert("商品加入购物车数量超过限制")ja = 20;}numa.children[1].value = ja;p(numa, ja);money();number();}//输入件数if (target.className == "shopNumber") {target.onblur = function() {var numa = target.parentNode;// 还可以购买var msg = numa.querySelector(".msg");var ja = target.value;if (ja == 0) {alert("修改数量不能小于1")ja = 1;} else if (ja == 1) {msg.style.display = "none";} else if (ja > 1 && ja < 10) {msg.style.display = "block";msg.innerHTML = "还可以购买10件以上";} else if (ja >= 10 && ja < 20) {msg.style.display = "block";msg.innerHTML = "还可以购买" + (20 - ja) +"件";} else if (ja == 20) {msg.style.display = "none";} else if (ja > 20) {alert("商品加入购物车数量超过限制")ja = 20;msg.style.display = "none";} else {alert("请输入数字")ja = 1;}p(numa, ja)money();}}// 删除商品if (target.className == "iconfont icon-X-") {var flag = confirm("是否确定删除商品？");if (flag) {target.parentNode.parentNode.remove();// 判断移除之后的总价，和已选数量money();number();var itemBtns = tbody.querySelectorAll(".item");console.log(itemBtns);for (var i = 0; i < itemBtns.length; i++) {if (itemBtns[i].className == "iconfont icon-succ item") {all.className = "iconfont icon-succ all";break;}all.className = "iconfont icon-succ all btn";}}}// 全选判断if (target.className == "iconfont icon-succ all" ||target.className == "iconfont icon-succ all btn") {var itemBtns = tbody.querySelectorAll(".item");// 全选if (target.className == "iconfont icon-succ all") {target.className += " btn";// 结算close.className += " btn-close";for (var i = 0; i < itemBtns.length; i++) {itemBtns[i].className = "iconfont icon-succ item btn";} // 已选数量，总价money();}//取消全选else if (target.className == "iconfont icon-succ all btn") {target.className = "iconfont icon-succ all";// 结算close.className = "close  btn-disabled";// 已选数量gnumber.innerHTML = 0;// 总价em.innerHTML = 0;// 勾选提示noTip.style.display = "block";for (var i = 0; i < itemBtns.length; i++) {itemBtns[i].className = "iconfont icon-succ item";}}}// 单选判断if (target.className == "iconfont icon-succ item" ||target.className == "iconfont icon-succ item btn") {var itemBtns = tbody.querySelectorAll(".item");// 单选if (target.className == "iconfont icon-succ item") {target.className += " btn";close.className += " btn-close";// 单选判断全选for (var i = 0; i < itemBtns.length; i++) {if (itemBtns[i].className == "iconfont icon-succ item") {all.className = "iconfont icon-succ all";break;}all.className = "iconfont icon-succ all btn";}} else if (target.className == "iconfont icon-succ item btn") {target.className = "iconfont icon-succ item";// 取消全选all.className = "iconfont icon-succ all";if (snumber == 0) {// 结算按钮背景close.className = "close btn-disabled";}}// 总价和已选商品money();}};// 小计function p(num, n) {// 数量num.querySelector(".shopNumber").value = n;// 获取单价price = parseInt(parseFloat(num.parentNode.parentNode.querySelector(".price").innerHTML) * 10);// 小计价格var ic = num.parentNode.parentNode.querySelector(".ic");ic.innerHTML = n * price / 10 + "元";}// 总价var moneys = 0;// 已选数量var j = 0;var snumber = 0;function money() {var itemBtns = document.querySelectorAll(".c span");for (var i = 0; i < itemBtns.length; i++) {if (itemBtns[i].className == "iconfont icon-succ item btn") {// 获取小计价格countVlue = parseInt(parseFloat(itemBtns[i].parentNode.parentNode.querySelector(".count").innerHTML) * 10);moneys += countVlue;j = parseInt(itemBtns[i].parentNode.parentNode.querySelector(".shopNumber").value);snumber = snumber + j;}}// 总价em.innerHTML = moneys / 10;// 已选择数量gnumber.innerHTML = snumber;if (snumber > 0) {noTip.style.display = "none";} else {noTip.style.display = "block";}moneys = 0;snumber = 0;}// 总量var cnumber = 0;var c = 0;function number() {var itemBtns = document.querySelectorAll(".c span");for (var i = 0; i < itemBtns.length; i++) {c = parseInt(itemBtns[i].parentNode.parentNode.querySelector(".shopNumber").value);cnumber += c;}cNumber.innerHTML = cnumber;cnumber = 0;}var shopList = document.querySelector(".shopList")var arrshop = [{imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/b474f7bb-10e1-ee92-f78f-d87231b0726a.jpg?thumb=1&w=180&h=180",shopName: "小米AI音箱",shopPrice: "199元",shopTips: "117.8万人好评",},{imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/413f38dda38c199d422a6ff453234ad4.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "米家声波电动牙刷T100",shopPrice: "39.9元",shopTips: "177万人好评",}, {imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d71b2748efea2b150b00bb1f30d8cf99.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "MIJOY 小魔爪按摩器",shopPrice: "9.9元",shopTips: "18.6万人好评",}, {imgSrc: "https://i8.mifile.cn/b2c-mimall-media/64de04b0cb774f0b33ed4a00df0f9c3c!180x180.jpg",shopName: "手机USB micro 数据线",shopPrice: "19.9元",shopTips: "57.8万人好评",}, {imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32febc8b4df89cda9019aab1643b7eb8.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "米家插电夜灯",shopPrice: "39.9元",shopTips: "7.8万人好评",}, {imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4b762a0c59fd01f5c4068c61a9da56e7.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "小米中性笔",shopPrice: "24.9元",shopTips: "13.8万人好评",}, {imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccefe4c39329ec01b587d114f64eab5.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "米家智能压力IH电饭煲1S 3L",shopPrice: "849元",shopTips: "1.8万人好评",}, {imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/b474f7bb-10e1-ee92-f78f-d87231b0726a.jpg?thumb=1&w=180&h=180",shopName: "米家自动洗手机套装",shopPrice: "69元",shopTips: "41.8万人好评",}, {imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1bXKjBQAT1RXrhCrK.jpg?thumb=1&w=180&h=180",shopName: "7号彩虹电池（10粒）",shopPrice: "199元",shopTips: "203.8万人好评",}, {imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9f3e968c9390f44a589afa48e92c6eb.jpg?thumb=1&w=180&h=180&f=webp&q=90",shopName: "贝医生防蛀健齿牙膏",shopPrice: "12.9元",shopTips: "56.8万人好评好评",},]var str = "";for (var i = 0; i < arrshop.length; i++) {var imgSrc = arrshop[i].imgSrc;var shopName = arrshop[i].shopName;var shopPrice = arrshop[i].shopPrice;var shopTips = arrshop[i].shopTips;str += ` <li class="shopitem"><a href="javascript:"><img src="${imgSrc}" alt=""><p class="shop-name">${shopName}</p><p class="shop-price">${shopPrice}</p><p class="shop-tips">${shopTips}</p></a><div class="action">加入购物车</div></li>`}// 添加事件// 事件委托shopList.innerHTML = str;shopList.onclick = function(event) {var event = event || window.event;var target = event.target || event.srcElement;if (target.className == "action") {// 获取livar shopitem = target.parentNode;// 获取商品名var shopName = shopitem.querySelector(".shop-name").innerHTML;// 价格var shopPric = shopitem.querySelector(".shop-price").innerHTML;// 获取图片var img = shopitem.querySelector("img").src;var tr = document.createElement("tr");tr.className = "tlist";tr.innerHTML ='<td class="c"><span class="iconfont icon-succ item btn"></span></td> <td class="simg"><img src="' + img + '" alt="" width=80px/></td> <td class="titles">' + shopName + '</td> <td class="price">' + shopPric + '</td><td class="number numbers"><div class="nu"><span class="iconfont icon-jianhao"></span><input type="text" value="1" class="shopNumber" /><span  class="iconfont icon-hao"></span><div class="msg">还可买 10 件以上 < /div></div></td><td class="count ic">' + shopPric + ' </td><td class="op"><span class="iconfont icon-X-"></span></td>';tbody.insertBefore(tr, tbody.children[1]);}number();}// 结算点击close.onmousedown = function() {if (close.className == "close btn-disabled") {close.style.boxShadow = "2px -2px 4px rgba(0, 0, 0, .3)";} else {var fl = confirm("是否确定购买？");}}close.onmouseup = function() {if (close.className == "close btn-disabled") {close.style.boxShadow = "";}}
}

js 实现完整版淘宝购物车相关推荐

淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
高仿淘宝购物车分分钟让你集成
前言做商城类电商app购物车确实一直是一个难点,为什么难呢? 主要原因呢是他里面的逻辑复杂,然后百度的资源好像都不太理想,好多就是一个简单的listView来实现根本就达不到开发的需求.然后一般 ...
python+selenium+chrome实现淘宝购物车秒杀自动结算
python+selenium+chrome实现淘宝购物车秒杀自动结算一.所需环境二.安装三.代码最后run()一把就ok了!! 之前总是想要买aj,但是淘宝店铺每次发售手动抢的时候一般都会被 ...
互联网晚报 | 12月8日星期三 | 淘宝购物车上线“好友买单”功能；英超联赛正式入驻视频号；中国联通成立5G消息生态联盟...
今日看点 ✦ 中国联通成立5G消息生态联盟,已搭建300余项示范应用 ✦ 淘宝购物车双12上线"好友买单"功能,将支持填写双地址 ✦ 百度百家号宣布创作者突破460万,2022年将 ...
HTML淘宝购物车页面的实现
一.实验目的和要求本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件使用表格标签.div标签.span标签.图像标签等实现效果设计启用浏 ...
面试高频问题——“淘宝购物车”怎么测试
面试高频问题--"淘宝购物车"怎么测试测试思维依然附上测试任何事物的测试思路: 第一步:梳理产品的核心业务流程:明白这是个什么项目,实现了什么业务,以及是怎么实现的? 这个步骤 ...
练手写的python 淘宝购物车秒杀器源码，成品链接，效果图
#-*-coding:GBK -*- import os import winreg #操作注册表 import re import sys from tkinter import * from wi ...
互联网晚报 | 10月28日星期四 | 农夫山泉钟睒睒首次成为中国首富；淘宝购物车分享功能上线；段永平否认牵头OV联合造车...
‍ ‍今日看点 ✦ 荣耀打响重回海外第一枪:多国市场发布荣耀50系列 ✦ 段永平否认牵头OPPO.vivo联合造车,称绝不会"重出江湖" ✦ 淘宝购物车分享功能正式上线,可以分享至 ...

js 实现完整版淘宝购物车

功能分析：

1、HTML相关代码

2、css样式代码

3、js相关代码

js 实现完整版淘宝购物车相关推荐

最新文章

热门文章