js+html实现购物车功能_html-js-css

实现购物车物品删除，数量增加减少，选中，批量删除，结算功能，金额汇总，商品数量汇总，前端代码时借用一个博主小哥的，因为本博主对前端显示界面的美化不擅长，这里为了方便，就引用其他博主小哥的前端界面代码！！如果写的不好，望见谅，欢迎大众指出我的不足。

前端css

* {
    margin:0;
    padding:0;
}
body {
    font-size:13px;
}
input {
    vertical-align:middle;
}
a {
    text-decoration:none;
    color:#333333;
}
.fl {
    float:left;
}
.fr {
    float:right;
}
.pro-main {
    width:1000px;
    margin:100px auto;
}
.cart-info .all,.cart-info .pro-info,.cart-info .dj-price,.cart-info .num-pro,.cart-info .zj-price,.cart-info .cz {
    float:left;
}
.cart-info {
    height:40px;
    line-height:40px;
    background-color:#EFEFEF;
}
.cart-info .all {
    width:80px;
    padding:0px 15px;
}
.cart-info .all input {
    margin-right:8px;
}
.cart-info .pro-info {
    width:500px;
}
.cart-info .dj-price {
    width:80px;
}
.cart-info .num-pro {
    width:120px;
}
.cart-info .zj-price {
    width:110px;
}
.cart-info .cz {
    width:80px;
}
.cart-main {
    margin-top:15px;
}
.cart-item {
    border:1px solid #EFEFEF;
    padding:15px;
    overflow:hidden;
    margin-bottom:15px;
}
.cart-j {
    width:30px;
}
.pro-item {
    width:560px;
}
.pro-item .pro-img {
    width:80px;
    height:80px;
}
.pro-item .pro-title {
    width:225px;
    line-height:1.8;
    padding:0px 15px;
}
.pro-item .pro-gg {
    width:185px;
    padding:0px 15px;
    font-size:10px;
    color:#666;
}
.price-g {
    width:80px;
    color:black;
    font-weight:bold;
}
.price-num {
    width:95px;
    margin-right:30px;
    background-color:#EFEFEF;
    /* border:1px solid #EFEFEF;
    */
}
.price-num .increment,.price-num .decrement {
    width:20px;
    float:left;
    text-align:center;
}
.price-num .num {
    float:left;
    width:50px;
    text-align:center;
}
.price-jiner{
    width:110px;
    color:red;
    font-weight:bold;
}
.price-caozuo {
    width:40px;
}
.priceAll {
    margin:0px 20px;
}
.priceAll span {
    padding:0px 8px;
    color:#f22d00;
    font-weight:bold;
    font-size:15px;
}
.spnum em {
    font-style:normal;
    padding:0px 8px;
    color:#f22d00;
    font-weight:bold;
    font-size:15px;
}
.js-btn {
    display:block;
    width:100px;
    text-align:center;
    background-color:#f22d00;
    color:white;
}
.pro-item img {
    width:80px;
}

html代码：




  
  
  
  Document
  
  




  
    全选
    商品信息
    单价
    数量
    金额
     *** 作
  
  
    
      
        
      
      
        
        西部数据(WD)蓝盘 1TB1
        SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)
      
      ￥28.60
      
        +
        
        -
      
      ￥28.60
      删除
    
    
      
        
      
      
        
        西部数据(WD)蓝盘 1TB2
        SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)
      
      ￥40.50
      
        +
        
        -
      
      ￥40.50
      删除
    
    
      
        
      
      
        
        西部数据(WD)蓝盘 1TB3
        SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)
      
      ￥29.60
      
        +
        
        -
      
      ￥29.60
      删除
    
  
  
        
    
      批量删除
    
    
      
        已选商品0件
      
      合计（不含运费）: 0.00 元
      结算