js实现简易购物车功能

最新推荐文章于 2023-08-17 09:13:38 发布
不及0908
最新推荐文章于 2023-08-17 09:13:38 发布
阅读量929
点赞数 2
文章标签： js checkbox
本文链接：https://blog.csdn.net/huhuhuja/article/details/109024879
版权
<!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" />&nbsp;&nbsp;全选</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>
不及0908
关注
2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现简易购物车功能

<!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购物车结算&l.
复制链接

扫一扫