使用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.price
                    if(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=num
        localStorage.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=num
        localStorage.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)
  }
  })