js实现简易购物车功能

╰半夏微凉° 2022-12-13 14:14 155阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>26购物车结算</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
    
        a {
          color: #666;
          text-decoration: none;
        }
    
        table {
          border-collapse: collapse;
          border-spacing: 0;
          border: 0;
        }
    
        body {
          color: #666;
          font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
    
        clearfix:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
    
        .clearfix {
          display: inline-table;
        }
    
        *html .clearfix {
          height: 1%;
        }
    
        .clearfix {
          display: block;
        }
    
        *+html .clearfix {
          min-height: 1%;
        }
    
        .fl {
          float: left;
        }
    
        .fr {
          float: right;
        }
    
        /*素材家园 - www.sucaijiayuan.com*/
        .catbox {
          width: 940px;
          margin: 100px auto;
        }
    
        .catbox table {
          text-align: center;
          width: 100%;
        }
    
        .catbox table th,
        .catbox table td {
          border: 1px solid #cadeff;
        }
    
        .catbox table th {
          background: #e2f2ff;
          border-top: 3px solid #a7cbff;
          height: 30px;
        }
    
        .catbox table td {
          padding: 10px;
          color: #444;
        }
    
        .catbox table tbody tr:hover {
          background: RGB(238, 246, 255);
        }
    
        .checkbox {
          width: 60px;
        }
    
        .check-all {
          vertical-align: middle;
        }
    
        .goods {
          width: 300px;
        }
    
        .goods span {
          width: 180px;
          margin-top: 20px;
          text-align: left;
          float: left;
        }
    
        .goods img {
          width: 100px;
          height: 80px;
          margin-right: 10px;
          float: left;
        }
    
        .price {
          width: 130px;
        }
    
        .count {
          width: 90px;
        }
    
        .count .add,
        .count input,
        .count .reduce {
          float: left;
          margin-right: -1px;
          position: relative;
          z-index: 0;
        }
    
        .count .add,
        .count .reduce {
          height: 23px;
          width: 17px;
          border: 1px solid #e5e5e5;
          background: #f0f0f0;
          text-align: center;
          line-height: 23px;
          color: #444;
        }
    
        .count .add:hover,
        .count .reduce:hover {
          color: #f50;
          z-index: 3;
          border-color: #f60;
          cursor: pointer;
        }
    
        .count input {
          width: 50px;
          height: 15px;
          line-height: 15px;
          border: 1px solid #aaa;
          color: #343434;
          text-align: center;
          padding: 4px 0;
          background-color: #fff;
          z-index: 2;
        }
    
        .subtotal {
          width: 150px;
          color: red;
          font-weight: bold;
        }
    
        .operation span:hover,
        a:hover {
          cursor: pointer;
          color: red;
          text-decoration: underline;
        }
    
        .foot {
          margin-top: 0px;
          color: #666;
          height: 48px;
          border: 1px solid #c8c8c8;
          border-top: 0;
          background-color: #eaeaea;
          background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
          position: relative;
          z-index: 8;
        }
    
        .foot div,
        .foot a {
          line-height: 48px;
          height: 48px;
        }
    
        .foot .select-all {
          width: 80px;
          height: 48px;
          line-height: 48px;
          color: #666;
          text-align: center;
        }
    
        .foot .delete {
          padding-left: 10px;
        }
    
        .foot .closing {
          border-left: 1px solid #c8c8c8;
          width: 103px;
          text-align: center;
          color: #666;
          font-weight: bold;
          cursor: pointer;
          background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
        }
    
        .foot .closing:hover {
          background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
          color: #333;
        }
    
        .foot .total {
          margin: 0 20px;
          cursor: pointer;
        }
    
        .foot #priceTotal,
        .foot #selectedTotal {
          color: red;
          font-family: "Microsoft Yahei";
          font-weight: bold;
        }
    
        .foot .selected {
          cursor: pointer;
        }
    
        .foot .selected .arrow {
          position: relative;
          top: -3px;
          margin-left: 3px;
        }
    
        .foot .selected .down {
          position: relative;
          top: 3px;
          display: none;
        }
    
        .show .selected .down {
          display: inline;
        }
    
        .show .selected .up {
          display: none;
        }
    
        .foot .selected:hover .arrow {
          color: red;
        }
    
        .foot .selected-view {
          width: 938px;
          border: 1px solid #c8c8c8;
          position: absolute;
          height: auto;
          background: #ffffff;
          z-index: 9;
          bottom: 48px;
          left: -1px;
          display: none;
        }
    
        .show .selected-view {
          display: block;
        }
    
        .foot .selected-view div {
          height: auto;
        }
    
        .foot .selected-view .arrow {
          font-size: 16px;
          line-height: 100%;
          color: #c8c8c8;
          position: absolute;
          right: 330px;
          bottom: -9px;
        }
    
        .foot .selected-view .arrow span {
          color: #ffffff;
          position: absolute;
          left: 0px;
          bottom: 1px;
        }
    
        #selectedViewList {
          padding: 10px 20px 10px 20px;
        }
    
        #selectedViewList div {
          /* display: inline-block; */
          position: relative;
          width: 100px;
          height: 80px;
          border: 1px solid #ccc;
          margin: 10px;
          float: left;
        }
    
        #selectedViewList div img {
          width: 100px;
          height: 80px;
          margin-right: 10px;
          float: left;
        }
    
        #selectedViewList div span {
          display: none;
          color: #ffffff;
          font-size: 12px;
          position: absolute;
          top: 0px;
          right: 0px;
          width: 60px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          background: #000;
          cursor: pointer;
        }
    
        #selectedViewList div:hover span {
          display: block;
        }
      </style>
    </head>
    
    <body>
      <div class="catbox">
        <table id="cartTable">
          <thead>
            <tr>
              <th><label>
                  <input class="check-all check" type="checkbox" />  全选</label></th>
              <th>商品</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="checkbox">
                <input class="check-one check" type="checkbox" />
              </td>
              <td class="goods">
                <img src="img/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span>
              </td>
              <td class="price">5999.88</td>
              <td class="count">
                <span class="reduce"></span>
                <input class="count-input" type="text" value="1" />
                <span class="add">+</span>
              </td>
              <td class="subtotal">5999.88</td>
              <td class="operation">
                <span class="delete">删除</span>
              </td>
            </tr>
            <tr>
              <td class="checkbox">
                <input class="check-one check" type="checkbox" />
              </td>
              <td class="goods">
                <img src="img/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span>
              </td>
              <td class="price">3888.50</td>
              <td class="count">
                <span class="reduce"></span>
                <input class="count-input" type="text" value="1" />
                <span class="add">+</span>
              </td>
              <td class="subtotal">3888.50</td>
              <td class="operation">
                <span class="delete">删除</span>
              </td>
            </tr>
            <tr>
              <td class="checkbox">
                <input class="check-one check" type="checkbox" />
              </td>
              <td class="goods">
                <img src="img/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span>
              </td>
              <td class="price">1428.50</td>
              <td class="count">
                <span class="reduce"></span>
                <input class="count-input" type="text" value="1" />
                <span class="add">+</span>
              </td>
              <td class="subtotal">1428.50</td>
              <td class="operation">
                <span class="delete">删除</span>
              </td>
            </tr>
            <tr>
              <td class="checkbox">
                <input class="check-one check" type="checkbox" />
              </td>
              <td class="goods">
                <img src="img/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span>
              </td>
              <td class="price">640.60</td>
              <td class="count">
                <span class="reduce"></span>
                <input class="count-input" type="text" value="1" />
                <span class="add">+</span>
              </td>
              <td class="subtotal">640.60</td>
              <td class="operation">
                <span class="delete">删除</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="foot" id="foot">
          <a class="fl delete" id="deleteAll">删除</a>
          <div class="fr closing">结 算</div>
          <input type="hidden" id="cartTotalPrice" />
          <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
          <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
        </div>
      </div>
    </body>
    <script>
        var adds=document.getElementsByClassName("add");
        var reduces=document.getElementsByClassName("reduce")
        var counts=document.getElementsByClassName("count-input");
        var checks=document.getElementsByClassName("check-all")[0];
        var check=document.getElementsByClassName("check-one");
        var deletes=document.getElementsByClassName("delete");
        var deleteAlls=document.getElementById("deleteAll");
        var price=document.getElementById("priceTotal");
        var selectedTotal=document.getElementById("selectedTotal");
        var subtotals=document.getElementsByClassName("subtotal");
    
        //调用计算总价的函数
        totalPrice();
    
        //按动全选按钮时触发
            checks.onclick=function(){
                //循环让所有的选择按钮与全选状态一致
                for(var i=0;i<check.length;i++){
                    check[i].checked=checks.checked;
                }
                //调用计算总价的函数
                totalPrice();
            }
    
        //商品最后的删除按钮
            for(var i=0;i<deletes.length;i++){
                //当出现点击时触发
                deletes[i].onclick=function() {
                    //找到该触发节点的父元素的父元素(即该一整行)
                    var needs=this.parentNode.parentNode;
                    //删除
                    needs.remove();
                }
                //调用计算总价的函数
                totalPrice();
            }
    
            //只要选中则删除
            deleteAlls.onclick=function(){
                //循环遍历所有选择按钮
                for(var i=0;i<check.length;i++){
                    //若选中,则找到该节点的父元素的父元素(即该一整行)
                    if(check[i].checked==true){
                        var needss=check[i].parentNode.parentNode;
                        needss.remove();
                        //此时其后面节点所对应的的小标都提前1,则i也要-1,否则下面运行i++会跳过一个
                        i--;
                    }       
                }
                //调用计算总价的函数
                totalPrice();
        }
    
        //单选全选中时全选选中
        for(var i=0;i<check.length;i++){
            //遍历所有单选按钮
            check[i].onclick=function(){
                //设置一个旗帜
                var flag=true;
                for(var i=0;i<check.length;i++){
                    if(!check[i].checked){
                        //当出现单选框没被选中时,旗帜为false,否则说明旗帜全被选中
                        flag=false;
                        break;
                    }
                }
                if(flag){
                checks.checked=true;
                }else{
                    //全选不选中
                    checks.checked=false;
            }
            totalPrice();
            }
        }
        
        //添加商品个数
            for(var i=0;i<adds.length;i++){
                //当点击+时触发
                adds[i].onclick=function(){
                    //获取+号元素的上一个兄弟元素节点(即计算物品件数的元素)
                    var counter=this.previousElementSibling;
                    //当按下+时,其值在原有的基础上+1,先将counter.value*1,使其字符类型由字符串类型转换为数字类型
                    counter.value=counter.value*1+1;
                    //然后获取该+号元素的上一个兄弟元素节点的上一个兄弟元素节点(即代表减号的标签)
                    var reducer=counter.previousElementSibling;
                    //将-号赋值给该标签
                    reducer.innerHTML="-";
                    //获取该+号元素的父节点的下一个兄弟元素节点(即显示该商品总价的标签)
                    var summ=this.parentNode.nextElementSibling;
                    //获取该+号元素的父节点的上一个兄弟元素节点(即显示该商品单价的标签)
                    var cankao=this.parentNode.previousElementSibling;
                    //将单价乘以此时的件数,获取总价然后取小数点后两位
                    summ.innerHTML=(cankao.innerHTML*counter.value).toFixed(2);
                    //调用最后的结算的方法
                    totalPrice();
                }
    
            }
        //删减商品个数
            for(var i=0;i<reduces.length;i++){
                //当点击-号时触发
                reduces[i].onclick=function(){
                    //获取当前-元素节点的下一个兄弟节点元素(即计算物品件数的标签)
                    var counter=this.nextElementSibling;
                    //当物品件数大于1时
                    if(Number(counter.value)>1){
                        //物品的件数在原有的基础上减1
                        counter.value=counter.value*1-1;
                        //获取该-号元素的父节点的下一个兄弟元素节点(即显示该商品总价的标签)
                        var summ=this.parentNode.nextElementSibling;
                        //获取该-号元素的父节点的上一个兄弟元素节点(即显示该商品单价的标签)
                        var cankao=this.parentNode.previousElementSibling;
                        //将单价乘以此时的件数,获取总价然后取小数点后两位
                        summ.innerHTML=(cankao.innerHTML*counter.value).toFixed(2);
                    }else if(Number(counter.value)==1){
                        //若物品件数为1,让件数不显示
                        this.innerHTML="";
                    }
                    //调用最后的结算的方法
                    totalPrice();
                }
            }
    
      
            //结算函数
            function totalPrice(){
                //设置初始总件数,总价为0
                var total=0;
                var prices=0;
                //循环遍历看哪个单选框被选中
            for(var i=0;i<check.length;i++){     
                    if(check[i].checked==true){
                        //若被选中,找到其对应的填写总件数的标签
                        var countya=counts[i];
                        //找到其记录该物品总价的标签
                        var subtotal=subtotals[i]
                        //将被选中的物品总件数和价钱分别求和
                        total=total+(countya.value*1);
                        prices=prices+(subtotal.innerHTML*1)
                    }
                        
            }
            //将其最终值传到对应的标签中
            selectedTotal.innerHTML=total;
            price.innerHTML=prices.toFixed(2);
        }
                  
    </script>
    </html>