使用jqery模拟网易严选购物车功能

今天完成了使用jquery模拟网易严选的购物车功能，肯定没有原网站的好啦，但是基本功能还是可以的！以下分别为html、css、js代码截图，代码有点多，还希望大佬勿评，小白互相学习。需要下载的插件就自行下载啦！

一、html

购物车 - 网易严选

    <div class="main"><div class="out"><div class="mainfirst"><div>登录/注册</div><div>我的订单</div><div>会员</div><div>甄选家</div><div>企业采购</div><div>客户服务</div><div>APP</div></div></div></div><div class="nav"><div class="navfirst"><a href=""><i></i></a><div class="cp"><div class="cpnav"><i class="cpnavone"></i><span>购物车</span><i class="cpnavtwo">0</i></div></div><div class="search"><div class="se"><i></i><input type="text"></div><div class="sebtn"><span>搜索</span></div></div><h2>新人首单0元购&nbsp;&nbsp;|&nbsp;&nbsp;寒潮预警&nbsp;&nbsp;|&nbsp;&nbsp;省钱卡</h2><ul class="navlist"><li><a href="http://127.0.0.1:5500/pages/main.html">首页</a> </li><li><a href="">居家生活</a> </li><li><a href="">服饰鞋包</a> </li><li><a href="">美食酒水</a> </li><li><a href="">个护清洁</a> </li><li><a href="">母婴亲子</a> </li><li><a href="">运动旅行</a> </li><li><a href="">数码家电</a> </li><li><a href="">严选全球</a> </li><li><a href="">为你严选</a> </li><li><a href="">众筹</a> </li></ul></div></div><div class="cartnav"><div class="navone"><i></i><span>购物车可领优惠券</span></div><div class="navtwo"><span>领券</span><i></i></div></div><div class="cartmain"><div class="carttop"><div class="catone"><div class="tt"><div class="w-w1"><input type="checkbox"><span>全选</span></div><div class="w-w2">商品信息</div><div class="w-w3">单价</div><div class="w-w4">数量</div><div class="w-w5">小计</div><div class="w-w6">操作</div></div></div><div class="cattwo"><div class="caf"><div class="wrap"><span>全场换购</span><span>已满300元享满300低至3折换购</span><a href="#">去换购</a><a href="#">继续凑单>></a></div></div><div class="cat"><div class="catdata"><span>满赠</span><span>已满足【满299元领取赠品】</span><a href="#">更换赠品</a><a href="#">继续凑单>></a></div><!--   <div class="emptystatus"><div class="emptyCart"></div><div class="emptyText">购物车还是空滴</div><p><span>登录</span><a href="#">继续逛</a></p></div> --><!-- <div class="catitem"><div class="catitem-w1"><input type="checkbox"></div><div class="catitem-w2"><div class="pic"><img src="../img/show/05.png" alt=""></div><div class="namecon"><p>睡着按摩颈椎 泰国93%含量天然乳胶枕</p><h3>1个装</h3><i></i></div></div><div class="catitem-w3"><h2><span><span>¥</span><span>199.00</span></span></h2></div><div class="catitem-w4"><div class="textcon"><span>-</span><span></span><span>+</span></div></div><div class="catitem-w5"><p>¥398.00</p></div><div class="catitem-w6"><a href="#">移入收藏夹</a><a href="#">删除</a></div></div> --></div></div></div><div class="cartbot"><div class="cbone"><input type="checkbox"><span><span>已选（</span><span class="cbonenum">0</span><span>）</span></span><a href="#">批量删除</a><a href="#">清空失效商品</a></div><button class="cbfour">下单</button><div class="cbtwo"><h5>商品合计 : <span><span>¥</span><span>557.00</span></span></h5><p>已优惠 : <span><span>-¥</span><span>159.00</span></span></p></div><div class="cbthr"><h6>应付总额：<span><span>¥ </span><span class="cbthrnum">00.00</span></span></h6><p>已满足免邮条件</p></div><!--    <button class="cbfour">下单</button> --></div></div><div class="like"><div class="likeone"><span>猜你喜欢</span></div><div class="likeimg"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><ul class="swiperlist"><li><img src="../img/show/01.png" alt=""><div class="imgnav"><h4>女式无缝运动T恤</h4><p><span>¥49.9</span><i></i></p></div></li><li><img src="../img/show/02.png" alt=""><div class="imgnav"><h4>缓解“低头族”颈椎酸痛，EMS颈椎按摩仪</h4><p><span>¥149</span><i></i></p></div></li><li><img src="../img/show/03.png" alt=""><div class="imgnav"><h4>飞天53度贵州茅台酒 500毫升</h4><p><span>¥1499</span><i></i></p></div></li><li><img src="../img/show/04.png" alt=""><div class="imgnav"><h4>告别啃食尴尬，秘制无骨凤爪 108克</h4><p><span>¥13</span><i></i></p></div></li></ul></div><div class="swiper-slide"><ul class="swiperlist"><li><img src="../img/show/01.png" alt=""><div class="imgnav"><h4>女式无缝运动T恤</h4><p><span>¥49.9</span><i></i></p></div></li><li><img src="../img/show/02.png" alt=""><div class="imgnav"><h4>缓解“低头族”颈椎酸痛，EMS颈椎按摩仪</h4><p><span>¥149</span><i></i></p></div></li><li><img src="../img/show/03.png" alt=""><div class="imgnav"><h4>飞天53度贵州茅台酒 500毫升</h4><p><span>¥1499</span><i></i></p></div></li><li><img src="../img/show/04.png" alt=""><div class="imgnav"><h4>告别啃食尴尬，秘制无骨凤爪 108克</h4><p><span>¥13</span><i></i></p></div></li></ul></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><!-- <div class="swiper-button-prev"></div><div class="swiper-button-next"></div> --></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>    <div class="bottom"><div class="bottop"><div class="bp"><div class="bpleft"><h5>客户服务</h5><a href=""><i></i><h6>在线客服</h6></a><a href=""><i></i><h6>用户反馈</h6></a></div><div class="bpcenter"><h4>何为严选</h4><p>网易原创生活类电商品牌，秉承网易一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到优质的商品</p><div class="bpct"><p>关注我们：</p><div class="bpctimg"><div><i></i></div><div><i></i></div><div><a href=""></a></div></div></div></div><div class="bpright"><h4>扫码下载严选APP</h4><img src="../img/banner/01.png" alt=""><p>下载领大额新人红包</p></div></div></div><div class="botbig"><div class="botbot"> <ul class="botlist"><li><div><i></i><p>网易自营电商</p></div></li><li><div><i></i><p>30天无忧退换货</p></div></li><li><div><i></i><p>满99元免邮费</p></div></li><li><div><i></i><p>品质保证</p></div></li></ul><div class="botborder"></div><div class="botnav"><ul class="botbotlist"><li>关于我们</li><li>帮助中心</li><li>售后服务</li><li>配送与验收</li><li>商务合作</li><li>企业采购</li><li>开放平台</li><li>搜索推荐</li><li>友情链接</li><li>廉正举报</li></ul><p class="firstp"><span>食品经营许可证：JY13301080111719</span><span>出版物经营许可证：新出发滨字第0132号</span><span>妙得ICP证号：ICP 证浙B2-20160106</span><span>浙杭食药监械经营备20171029号</span><span>营业执照</span><span>网易公司版权所有 © 1997-2020</span></p><p><span>无线电发射设备销售备案：42202011096855</span><span>（浙杭）网械企备字[2019]第00119号</span><span>（粤）网械平台备字（2019）第00004号</span><span>（粤）-非经营性-2016-0023</span></p><p class="thrtp"><span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010009</span><span>单用途商业预付卡备案证：330100AAC0024</span><a href=""><img src="../img/banner/02.gif" alt=""></a></p></div></div></div></div></div>

})

## 二、css .main { height: 36px; background-color: #333333; } .main .out { height: 36px; width: 1090px; margin: auto; }

.mainfirst {
width: 471.275px;
height: 36px;
margin-left: 618.72px; }
.mainfirst div {
color: #BCBCBC;
font-size: 12px;
float: left;
line-height: 36px; }
.mainfirst div:hover {
color: white; }

.mainfirst div:nth-child(1) {
width: 63.14px;
height: 36px; }

.mainfirst div:nth-child(2) {
width: 59px;
height: 36px; }

.mainfirst div:nth-child(3) {
width: 35px;
height: 36px; }

.mainfirst div:nth-child(4) {
width: 47px;
height: 36px; }

.mainfirst div:nth-child(5) {
width: 80px;
height: 36px; }

.mainfirst div:nth-child(6) {
width: 80px;
height: 36px; }

.mainfirst div:nth-child(7) {
width: 47.14px;
height: 36px; }

.nav {
height: 140px;
background-color: #FFFFFF;
box-shadow: 1px 1px 5px #BCBCBC; }
.nav .navfirst {
width: 1090px;
height: 140px;
margin: auto;
position: relative; }
.nav .navfirst .navlist {
float: left;
width: 1090px;
height: 30px;
position: absolute;
bottom: 21px; }
.nav .navfirst .navlist li {
float: left;
margin-top: 21px;
padding-left: 26px;
padding-right: 26px;
text-align: left; }
.nav .navfirst .navlist li a {
color: #333333;
font-weight: 700;
font-size: 14px;
line-height: 14px;
padding-bottom: 7px;
text-align: left;
border-bottom: 2px solid #ffffff; }
.nav .navfirst h2 {
font-size: 12px;
color: #cc9756;
position: absolute;
top: 70px;
left: 400px; }
.nav .navfirst .search {
width: 532px;
height: 36px;
margin-top: 26px;
border: 1px solid #cc9756;
border-radius: 20px 20px;
float: right;
overflow: hidden; }
.nav .navfirst .search .se {
position: relative; }
.nav .navfirst .search .se i {
background-image: url(…/img/banner/icon-1.png);
background-repeat: no-repeat;
background-position: 0px -36px;
width: 14px;
height: 14px;
/* display: block; */ }
.nav .navfirst .search .sebtn {
width: 90px;
height: 38px;
float: right;
font-size: 16px;
cursor: pointer;
line-height: 38px;
text-align: center;
background-color: #cc9756;
border: none; }
.nav .navfirst .search .sebtn span {
font-weight: 400;
color: #ffffff; }
.nav .navfirst .search .se input {
cursor: text;
width: 442px;
height: 38px;
font-size: 14px;
padding: 2px 0px 2px 38px;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
border: none; }
.nav .navfirst .cp {
width: 134px;
height: 38px;
color: #cc9756;
margin-top: 26px;
margin-left: 49px;
float: right;
border: 1px solid #cc9756;
border-radius: 20px 20px; }
.nav .navfirst .cp .cpnav {
padding-top: 8px;
padding-bottom: 8px;
width: 134px;
height: 38px; }
.nav .navfirst .cp .cpnav .cpnavone {
background-image: url(…/img/banner/icon-1.png);
background-repeat: no-repeat;
background-position: 0px -176px;
width: 18px;
height: 18px;
display: inline-block;
margin-left: 22px;
vertical-align: top; }
.nav .navfirst .cp .cpnav span {
font-size: 14px;
margin-left: 3px;
line-height: 21px;
margin-bottom: 3px; }
.nav .navfirst .cp .cpnav .cpnavtwo {
width: 19px;
height: 19px;
background-image: url(…/img/banner/icon-1.png);
background-repeat: no-repeat;
background-position: 0px -51px;
display: inline-block;
margin-left: 3px;
line-height: 20px;
text-align: center;
font-size: 12px;
color: #ffffff;
vertical-align: top; }

.navfirst a i {
width: 212px;
height: 60px;
margin-top: 25px;
background-image: url(…/img/banner/icon-1.png);
background-repeat: no-repeat;
background-position: 0px -303px;
display: block;
float: left; }

.navfirst a {
cursor: pointer;
float: left; }

.navfirst .navlist li:nth-child(1) {
padding-left: 0px; }

.navfirst .navlist li:nth-child(1) a {
color: #cc9756;
border-color: #cc9756; }

.navfirst .navlist li a:hover {
color: #cc9756;
border-color: #cc9756; }

.navfirst .navlist li:nth-child(11) {
padding-right: 0px; }

.bottom {
height: 567px;
border: 1px solid #E8E8E8; }
.bottom .bottop {
width: 1090px;
height: 299px;
margin: auto; }
.bottom .bottop .bp {
width: 1090px;
height: 204px;
margin: auto;
float: left;
padding-top: 60px;
padding-bottom: 34px; }
.bottom .bottop .bp .bpleft {
width: 362px;
height: 204px;
float: left; }
.bottom .bottop .bp .bpleft h5 {
font-size: 16px;
line-height: 16px;
margin-bottom: 28px;
text-align: center; }
.bottom .bottop .bp .bpleft a {
width: 80px;
height: 100px;
display: block;
border: 1px solid #ccc;
padding-top: 25px;
color: #00000f; }
.bottom .bottop .bp .bpleft a h6 {
font-size: 14px;
line-height: 26px;
margin-top: 10px;
text-align: center; }
.bottom .bottop .bp .bpleft a i {
width: 31px;
height: 26px;
display: inline-block;
margin-left: 23px; }
.bottom .bottop .bp .bpcenter {
width: 362px;
height: 204px;
float: left;
border-left: 1px solid #ccc; }
.bottom .bottop .bp .bpcenter h4 {
font-size: 16px;
line-height: 16px;
margin-bottom: 28px;
text-align: center; }
.bottom .bottop .bp .bpcenter p {
font-size: 13px;
line-height: 23px;
margin-bottom: 22px;
text-align: left;
width: 288.32px;
height: 67.2px;
margin: auto; }
.bottom .bottop .bp .bpcenter .bpct {
padding-right: 37px;
padding-left: 37px;
margin-top: 25px;
width: 362px;
height: 42px; }
.bottom .bottop .bp .bpcenter .bpct p {
float: left;
font-size: 14px;
line-height: 32px;
margin-right: 15px;
width: 70px;
height: 32px; }
.bottom .bottop .bp .bpcenter .bpct .bpctimg {
float: left;
width: 126px;
height: 42px; }
.bottom .bottop .bp .bpcenter .bpct .bpctimg div {
width: 32px;
height: 42px;
float: left; }
.bottom .bottop .bp .bpright {
width: 362px;
height: 204px;
float: left;
border-left: 1px solid #ccc;
overflow: hidden; }
.bottom .bottop .bp .bpright h4 {
text-align: center;
font-size: 16px;
line-height: 16px;
margin-bottom: 28px; }
.bottom .bottop .bp .bpright img {
width: 104px;
height: 104px;
margin-left: 127px; }
.bottom .bottop .bp .bpright p {
font-size: 12.8px;
line-height: 19.2px;
margin-top: 3px;
text-align: center;
color: #cc9756; }
.bottom .botbig {
height: 268px;
background-color: #414141; }
.bottom .botbig .botbot {
width: 1090px;
height: 268px;
margin: auto;
position: relative; }
.bottom .botbig .botbot .botborder {
width: 1090px;
height: 1px;
margin-bottom: 27px;
margin-top: 125px;
position: absolute;
background-color: #4F4F4F; }
.bottom .botbig .botbot .botlist {
float: left;
width: 1090px;
height: 51px;
margin-bottom: 30px;
padding-left: 17px;
margin-top: 40px; }
.bottom .botbig .botbot .botlist li {
float: left; }
.bottom .botbig .botbot .botnav {
width: 1090px;
height: 118px;
margin: auto;
color: #999999;
line-height: 18px;
text-align: center;
position: absolute;
top: 150px; }
.bottom .botbig .botbot .botnav p {
font-size: 12px;
line-height: 19.2px;
margin-bottom: 11px;
margin-top: 11px;
text-align: center;
width: 1090px;
height: 18px; }
.bottom .botbig .botbot .botnav .botbotlist {
float: left;
width: 1090px;
height: 18px;
margin-left: 150px; }
.bottom .botbig .botbot .botnav .botbotlist li {
float: left;
padding-left: 13px;
padding-right: 13px;
height: 17px;
border-right: 1px solid #4F4F4F;
text-align: center;
font-size: 12px;
line-height: 16px; }

.bpcenter .bpctimg div:nth-child(1) {
float: left;
margin-right: 15px;
padding-bottom: 10px; }

.bpcenter .bpctimg div:nth-child(2) {
float: left;
margin-right: 15px;
padding-bottom: 10px; }

.bpcenter .bpctimg div:nth-child(3) {
float: left;
padding-bottom: 10px; }

.bpleft a:nth-child(3) {
float: left;
margin-left: 29px; }

.bp .bpleft a:hover {
color: #cc9756; }

.bpleft a:nth-child(2) {
float: left;
margin-left: 83px; }

.botlist li div i {
width: 50px;
height: 50px;
margin-right: 17px; }

.botlist li div p {
font-size: 18px;
color: #ffffff;
line-height: 51px; }

.botlist li:nth-child(1) div {
width: 175px;
height: 51px; }

.botlist li:nth-child(1) div i {
width: 50px;
height: 50px;
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -134px;
display: block;
float: left; }

.botlist li:nth-child(1) div p {
width: 108px;
height: 50px;
float: left; }

.botlist li:nth-child(2) div i {
width: 50px;
height: 50px;
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -368px;
display: block;
float: left; }

.botlist li:nth-child(2) div p {
width: 130px;
height: 50px;
float: left; }

.botlist li:nth-child(3) div i {
width: 50px;
height: 50px;
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
float: left; }

.botlist li:nth-child(3) div p {
width: 112px;
height: 50px;
float: left; }

.botlist li:nth-child(4) div i {
width: 50px;
height: 50px;
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -194px;
display: block;
float: left; }

.botlist li:nth-child(4) div p {
width: 73px;
height: 50px;
float: left; }

.botlist li:nth-child(2) {
margin-left: 122px;
margin-right: 122px; }

.botlist li:nth-child(3) {
margin-right: 122px; }

.bpleft a:nth-child(2) i {
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -290px; }

.bpleft a:nth-child(3) i {
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -98px; }

.bpctimg div:nth-child(1) i {
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -470px;
width: 32px;
height: 32px;
display: inline-block; }

.bpctimg div:nth-child(2) i {
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -428px;
width: 32px;
height: 32px;
display: inline-block; }

.bpctimg div:nth-child(3) a {
background-image: url(…/img/banner/icon-2.png);
background-repeat: no-repeat;
background-position: 0px -326px;
width: 32px;
height: 32px;
display: inline-block; }

.botnav .botbotlist li:last-child {
border-right: none !important; }

.botnav .firstp {
margin-top: 30px !important;
white-space: nowrap; }

.botnav .thrtp a img {
width: 23px;
height: 25px;
vertical-align: top;
margin-top: -5px;
display: inline-block;
margin-left: 10px; }

.like {
width: 1090px;
height: 397px;
margin-top: 40px;
border: 1px solid #E8E8E8;
margin: auto;
margin-bottom: 80px; }
.like .likeimg {
width: 1088px;
height: 337px;
margin-top: 12px;
position: relative; }
.like .likeimg .swiper-button-prev {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
left: 35px; }
.like .likeimg .swiper-button-next {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
right: 50px; }
.like .likeimg .swiper-container {
width: 930px;
height: 337px;
margin-left: 79px;
margin-top: 12px; }
.like .likeimg .swiper-container .swiperlist {
width: 930px;
height: 337px;
float: left; }
.like .likeimg .swiper-container .swiperlist li {
float: left;
width: 210px;
height: 210px;
margin-right: 22px; }
.like .likeimg .swiper-container .swiperlist li .imgnav {
width: 210px;
height: 70.18px;
margin-top: 5px; }
.like .likeimg .swiper-container .swiperlist li .imgnav h4 {
margin-top: 19px;
font-size: 14.4px;
font-weight: 700;
line-height: 20px;
text-align: center;
color: #333333; }
.like .likeimg .swiper-container .swiperlist li .imgnav p span {
color: #D4282D;
font-size: 14.4px;
line-height: 22px;
text-align: center;
margin-left: 80px; }
.like .likeimg .swiper-container .swiperlist li img {
width: 100%;
height: 100%; }
.like .likeone {
width: 1088px;
height: 44px;
background-color: #F5F5F5; }
.like .likeone span {
font-size: 17px;
line-height: 44px;
margin-left: 30px;
font-weight: bold; }

.cartnav {
width: 1090px;
height: 40px;
margin-top: 10px !important;
margin: auto;
border: 1px solid #EAEAEA; }
.cartnav .navone {
width: 169px;
height: 37.6px;
float: left; }
.cartnav .navone span {
font-size: 14px;
line-height: 38px;
margin-left: 30px; }
.cartnav .navtwo {
float: right;
background-color: #E36844;
width: 89px;
height: 38px; }
.cartnav .navtwo span {
font-size: 12.8px;
line-height: 38px;
text-align: center;
color: #ffffff;
margin-left: 30px; }

.cartmain {
width: 1090px;
/* height: 567.49px; /
margin-top: 10px !important;
padding-bottom: 40px;
margin: auto; }
.cartmain .carttop {
width: 1090px;
/ height: 447.49px; / }
.cartmain .carttop .catone {
width: 1090px;
height: 46.49px;
background-color: #F5F5F5; }
.cartmain .carttop .catone .tt {
width: 1090px;
height: 46px;
padding-bottom: 12px;
padding-top: 12px;
margin-bottom: 20px; }
.cartmain .carttop .catone .tt .w-w1 {
float: left;
margin-left: 20px;
width: 139px;
height: 20.1px; }
.cartmain .carttop .catone .tt .w-w1 span {
margin-left: 14px;
color: #333333;
font-size: 13px; }
.cartmain .carttop .catone .tt .w-w2 {
float: left;
width: 300px;
height: 19.2px; }
.cartmain .carttop .catone .tt .w-w3 {
float: left;
width: 180px;
height: 19.2px; }
.cartmain .carttop .catone .tt .w-w4 {
float: left;
width: 170px;
height: 19.2px; }
.cartmain .carttop .catone .tt .w-w5 {
float: left;
width: 150px;
height: 19.2px;
padding-right: 30px; }
.cartmain .carttop .catone .tt .w-w6 {
float: left;
width: 129px;
height: 19.2px;
padding-right: 31px; }
.cartmain .carttop .cattwo {
width: 1090px;
/ height: 381px; / }
.cartmain .carttop .cattwo .cat {
width: 1090px;
/ height: 326px; /
background-color: #FFFBF0;
border: 1px solid #EAEAEA; }
.cartmain .carttop .cattwo .cat .emptystatus {
width: 1088px;
height: 263.47px;
background-color: #fff; }
.cartmain .carttop .cattwo .cat .emptystatus .emptyCart {
width: 180px;
height: 180px;
margin: auto;
background-image: url(…/img/banner/20.png);
background-repeat: no-repeat;
background-position: 0px -570px; }
.cartmain .carttop .cattwo .cat .emptystatus .emptyText {
width: 1088px;
height: 23.47px;
font-size: 16px;
color: #999;
text-align: center; }
.cartmain .carttop .cattwo .cat .emptystatus p {
width: 1088px;
height: 40px;
margin-top: 20px; }
.cartmain .carttop .cattwo .cat .emptystatus p a {
width: 100px;
height: 40px;
font-size: 16px;
line-height: 38px;
color: #b4a078;
background-color: #f5f3ef;
border-radius: 2px;
display: inline-block;
text-align: center; }
.cartmain .carttop .cattwo .cat .emptystatus p span {
width: 100px;
height: 40px;
margin-right: 18px;
line-height: 38px;
border: 1px solid #b4a078;
background-color: #b4a078;
font-size: 16px;
color: #ffffff;
display: inline-block;
text-align: center;
margin-left: 432px; }
.cartmain .carttop .cattwo .cat .catitem {
width: 1088px;
height: 140px;
margin-top: 20px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w1 {
width: 59px;
height: 59px;
float: left; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w1 input {
width: 18px;
height: 18px;
margin-top: 30px;
margin-left: 30px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w2 {
width: 400px;
height: 100px;
float: left;
position: relative;
/ overflow: hidden; / }
.cartmain .carttop .cattwo .cat .catitem .catitem-w2 .pic {
border: 1px solid #EAEAEA;
width: 98px;
height: 98px;
background-color: #F5F5F5; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w2 .pic img {
width: 100%;
height: 100%; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w2 .namecon {
padding-top: 10px;
display: inline-block;
position: absolute;
top: 10px;
left: 123px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w2 .namecon p {
font-size: 14px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w3 {
width: 180px;
height: 34px;
float: left; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w3 h2 {
padding-top: 20px;
padding-bottom: 10px;
margin-left: -10px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w3 h2 span {
font-size: 14px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w4 {
width: 170px;
height: 40px;
float: left;
padding-top: 10px;
padding-bottom: 14px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w4 .textcon {
width: 118px;
height: 26px;
border: 1px solid #DDDDDD;
margin-left: -40px;
margin-top: 10px;
background-color: #ffffff; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w4 .textcon span {
width: 24px;
height: 24px;
cursor: pointer;
display: inline-block;
text-align: center;
color: #999999; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w5 {
width: 150px;
height: 34px;
float: left;
padding-top: 20px;
margin-left: -10px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w5 p {
padding-right: 30px;
margin-bottom: 10px;
color: #D4282D;
font-size: 14px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w6 {
width: 129px;
height: 47.2px;
float: left;
padding-left: 3px;
margin-top: 10px; }
.cartmain .carttop .cattwo .cat .catitem .catitem-w6 a {
padding-top: 10px;
color: #666666;
font-size: 14px;
display: block; }
.cartmain .carttop .cattwo .cat .catdata {
width: 998px;
height: 43px;
margin-left: 60px;
margin-left: 30px;
border-bottom: 1px solid #EAEAEA; }
.cartmain .carttop .cattwo .caf {
width: 1090px;
height: 45px;
margin-top: 20px;
margin-bottom: 10px;
background-color: #FFFBF0;
border: 1px solid #EAEAEA; }
.cartmain .carttop .cattwo .caf .wrap {
width: 1088px;
height: 43px;
padding-left: 60px;
padding-right: 30px; }
.cartmain .cartbot {
width: 1090px;
height: 70px;
border: 1px solid #EAEAEA;
background-color: #F5F5F5;
margin-top: 10px; }
.cartmain .cartbot .cbone {
width: 296.21px;
height: 22.63px;
float: left;
margin-left: 22px;
margin-top: 24px; }
.cartmain .cartbot .cbone input {
background-color: #ffffff;
text-align: start;
width: 18px;
height: 18px;
vertical-align: middle; }
.cartmain .cartbot .cbone span {
font-size: 14px;
line-height: 21px; }
.cartmain .cartbot .cbone a {
font-size: 14px;
line-height: 21px;
margin-left: 26px;
color: #333333; }
.cartmain .cartbot .cbtwo {
width: 228.66px;
height: 70px;
float: right;
margin-right: 275px; }
.cartmain .cartbot .cbtwo h5 {
padding-top: 16px;
font-size: 14px;
color: #999999;
line-height: 14px;
margin-left: 10px;
margin-right: 10px; }
.cartmain .cartbot .cbtwo h5 span {
margin-left: 43px; }
.cartmain .cartbot .cbtwo p {
padding-top: 10px;
margin-left: 10px;
margin-right: 10px;
font-size: 14px;
color: #999999;
line-height: 14px; }
.cartmain .cartbot .cbtwo p span {
margin-left: 47px; }
.cartmain .cartbot .cbthr {
width: 244.25px;
height: 70px;
float: right;
margin-right: -490px; }
.cartmain .cartbot .cbthr p {
padding-top: 8px;
font-size: 14px;
color: #BE4141;
text-align: right;
padding-right: 30px; }
.cartmain .cartbot .cbthr h6 {
margin-top: 12px;
padding-left: 30px;
padding-right: 30px;
/ margin-right:20px; /
font-size: 14px;
line-height: 22px;
vertical-align: top; }
.cartmain .cartbot .cbthr h6 span {
font-size: 22px;
color: #BE4141;
font-weight: 700;
vertical-align: top;
margin-left: 6px; }
.cartmain .cartbot .cbfour {
float: right;
width: 140px;
height: 70px;
background-color: #B4A078;
/ border: 1px solid #B4A078; /
font-size: 18px;
line-height: 50px;
color: #ffffff;
/ display: inline-block; */ }

.cbtwo h5 span span:nth-child(2) {
margin-left: 0px !important; }

.cbtwo p span span:nth-child(2) {
margin-left: 0px !important; }

.cbthr h6 span span:nth-child(2) {
margin-left: 0px !important; }

.wrap span:nth-child(1) {
background-color: #E36844;
display: block;
float: left;
width: 62px;
height: 20px;
margin-right: 10px;
margin-top: 11px;
padding-right: 5px;
padding-left: 5px;
color: #ffffff;
font-size: 12px; }

.wrap span:nth-child(2) {
margin-right: 20px;
color: #666666;
font-size: 14px;
line-height: 42px; }

.wrap a:nth-child(1) {
background-color: #ffffff;
border: 1px solid #D4282D;
line-height: 22px;
display: inline-block;
width: 66px;
height: 24px;
margin-right: 20px !important;
color: #D4282D;
font-size: 12px; }

.wrap a:nth-child(2) {
line-height: 42px;
color: #6699CC;
font-size: 14px; }

.catdata span:nth-child(1) {
background-color: #E36844;
display: block;
float: left;
width: 36px;
height: 20px;
margin-right: 10px;
margin-top: 11px;
padding-right: 5px;
padding-left: 5px;
color: #ffffff;
font-size: 12px; }

.catdata span:nth-child(2) {
margin-right: 20px;
color: #666666;
font-size: 14px;
line-height: 42px; }

.catitem-w4 .textcon span:nth-child(2) {
width: 58px !important;
height: 26px !important;
text-align: center !important;
border: 1px solid #DDDDDD !important;
border-top: none !important;
/* border-bottom: none; */ }

三、js

$(function(){

if(localStorage.getItem("goods")){var goodsArr=JSON.parse(localStorage.getItem("goods"))$.ajax({url:"../date/carts.json",dataType:"json",type:"get",success:function(data){$.each(goodsArr,function(goodindex,gooditem){$.each(data,function(index,item){var arr=item.priceif(gooditem.code===item.code){var dom=``;dom+=`<div class="catitem"><div class="catitem-w1"><input type="checkbox" class="ipt"></div><div class="catitem-w2"><div class="pic"><img src="${item.imgurl}" alt=""></div><div class="namecon"><p>${item.title}</p><h3>1个装</h3><i></i></div></div><div class="catitem-w3"><h2><span><span>￥${item.price}</span></span></h2></div><div class="catitem-w4"><div class="textcon"><span class="next">-</span><span code="${item.code}" class="change">${gooditem.num}</span><span class="prev">+</span></div></div><div class="catitem-w5"><p price="${item.price}">￥${arr*gooditem.num}</p></div><div class="catitem-w6"><a href="#">移入收藏夹</a><a href="javascript:;" code="${item.code}" class="w6">删除</a></div></div>`    $(".cat").append(dom);} })             })/* })  */ }})//删除$(".cat").on("click",".catitem-w6 .w6",function(){$(this).parent().parent().remove()var code=$(this).attr("code")$.each(goodsArr,function(index,item){if(item.code===code){goodsArr.splice(index,1)return false}})if(goodsArr.length>0){localStorage.setItem("goods",JSON.stringify(goodsArr))   }else{localStorage.removeItem("goods")var nodata = `<div class="emptystatus"><div class="emptyCart"></div><div class="emptyText">购物车还是空滴</div><p><span>登录</span><a href="#">继续逛</a></p></div>`$('.cat').html(nodata)}alert( "商品移出成功")})//增加按钮
$(".cat").on("click",".catitem-w4 .textcon .prev",function(){
var num=$(this).siblings(".change").text();
num++;
$(this).siblings(".change").text(num);
var newNum= $(this).siblings(".change").text();
var  price=$(this).parent().parent().siblings(".catitem-w5").children("p").attr("price")
var lastprice=price*newNum;
$(this).parent().parent().siblings(".catitem-w5").children("p").text("￥"+lastprice)//增加按钮计算总数价格
if( $(this).parent().parent().siblings(".catitem-w1").children("input").prop("checked")){
var sumprice=0;
$(".catitem-w1 input").each(function(index,item){if($(item).prop("checked")){sumprice+=Number($(item).parent().siblings(".catitem-w5").children("p").text().split("￥").splice(1,1)) $(".cbthr h6 span .cbthrnum").text(sumprice)   }})}var code=$(this).siblings(".change").attr("code");
$.each(goodsArr,function(index,item){if(item.code===code){goodsArr[index].num=numlocalStorage.setItem("goods",JSON.stringify(goodsArr))}})
})//减少按钮
$(".cat").on("click",".catitem-w4 .textcon .next",function(){
var num=$(this).siblings(".change").text();
num--;
if(num<1){alert("本商品一件起售")return false
}
$(this).siblings(".change").text(num);
var newNum= $(this).siblings(".change").text();//数量
var  price=$(this).parent().parent().siblings(".catitem-w5").children("p").attr("price")
var lastprice=price*newNum;//总额
$(this).parent().parent().siblings(".catitem-w5").children("p").text("￥"+lastprice)//减少按钮后计算总数价格
if( $(this).parent().parent().siblings(".catitem-w1").children("input").prop("checked")){var sumprice=0;$(".catitem-w1 input").each(function(index,item){if($(item).prop("checked")){sumprice+=Number($(item).parent().siblings(".catitem-w5").children("p").text().split("￥").splice(1,1)) $(".cbthr h6 span .cbthrnum").text(sumprice)   }})}var code=$(this).siblings(".change").attr("code");
$.each(goodsArr,function(index,item){if(item.code===code){goodsArr[index].num=numlocalStorage.setItem("goods",JSON.stringify(goodsArr))}})})//判断多选框为全选时全选框选中，不全选就不选中
$(".cat").on("click",".catitem-w1 .ipt",function(){var flag=true/*  var price=0 */$(".catitem-w1 .ipt").each(function(index,item){if(!$(item).prop("checked")){$(".tt .w-w1 input").prop("checked",false)$(".cartbot .cbone input").prop("checked",false) flag=false;return false;}})if(flag){$(".tt .w-w1 input").prop("checked",true)$(".cartbot .cbone input").prop("checked",true)}})//上面点击全选就全选，为true时计算件数和总钱数，为false直接清0/* $(".tt .w-w1 input").click(function(){if($(this).prop("checked")){$(".cat .catitem-w1 .ipt").prop("checked",true)$(".cartbot .cbone input").prop("checked",true)var number=goodsArr.length$(".cbone span .cbonenum").text(number)var price=0;$(".catitem-w1 input:checked").each(function(index,item){price+=  Number($(item).parent().siblings(".catitem-w5").children("p").text().split("￥").splice(1,1))$(".cbthr h6 span .cbthrnum").text(price)})}else{$(".cartbot .cbone input").prop("checked",false)$(".cat .catitem-w1 .ipt").prop("checked",false)$(".cbone span .cbonenum").text(0)$(".cbthr h6 span .cbthrnum").text(0)}}) *///下面点击全选就全选，为true时计算件数和总钱数，为false直接清0$(".cartbot .cbone input").click(function(){if($(this).prop("checked")){$(".cat .catitem-w1 .ipt").prop("checked",true)$(".tt .w-w1 input").prop("checked",true)var number=goodsArr.length$(".cbone span .cbonenum").text(number)var price=0;$(".catitem-w1 input").each(function(index,item){if($(item).prop("checked")){price+=Number($(item).parent().siblings(".catitem-w5").children("p").text().split("￥").splice(1,1)) $(".cbthr h6 span .cbthrnum").text(price)   }})}else{$(".cat .catitem-w1 .ipt").prop("checked",false)$(".tt .w-w1 input").prop("checked",false)$(".cbone span .cbonenum").text(0)$(".cbthr h6 span .cbthrnum").text(0)}})//计算总价格 $(".cat").on("click",".catitem .catitem-w1 input",function(){var sumprice=0;$(".catitem input").each(function(index,value){if($(value).prop("checked")){sumprice+=Number($(value).parent().siblings(".catitem-w5").children("p").text().split("￥").splice(1,1)) }$(".cbthr h6 span .cbthrnum").text(sumprice) })})//计算件数
$(".cat").on("click",".catitem-w1 input",function(){$(this).each(function(index,item){if($(item).prop("checked")){var number=index+1$(".cbone span .cbonenum").text(number)    }else{$(".cbone span .cbonenum").text(0)}})
})
$(".cat").on("click",".catitem-w1 input",function(){$(".catitem-w1 input:checked").each(function(index,item){var number=index+1$(".cbone span .cbonenum").text(number) })
})}else{var nodata = `<div class="emptystatus"><div class="emptyCart"></div><div class="emptyText">购物车还是空滴</div><p><span>登录</span><a href="#">继续逛</a></p>
</div>`$('.cat').html(nodata)}})