jquery购物车案例

最新推荐文章于 2024-04-19 10:15:13 发布

相逢太短，莫等茶凉

最新推荐文章于 2024-04-19 10:15:13 发布

阅读量3.7k

点赞数 10

分类专栏： nodejs 文章标签： jquery css3 css

本文链接：https://blog.csdn.net/weixin_43849543/article/details/124561124

版权

nodejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现功能：
购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景

1.购物车的商品全选、计算商品总额

在这里插入图片描述

2.全不选

在这里插入图片描述

3.增减商品数量、修改商品小计、选中商品添加背景

在这里插入图片描述

4.删除商品

在这里插入图片描述
删除后：

5.删除所选商品

在这里插入图片描述
删除后：

6.清空购物车

在这里插入图片描述
清空后：

代码部分

<!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>购物车功能</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="./cart.js"></script>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>

</body>

</html>

js代码

$(function(){
      calc()
      function calc() {
        var checked_num = 0
        var total_money = 0
        //计算每件商品小计 单价*数量（保留两位小数）
        $('.total').map((i, k) => {
          $(k).text(parseInt(($(k).prev().prev().text().replace('￥', '')) * $(k).prev().find('input').val()).toFixed(
            2))
        })
        $('.s_ck').map((i, k) => {
          if ($(k).prop('checked') == true) {
            checked_num++
            var parent = $(k).parent().parent()
            total_money += parent.find('.total').text() - 0
          }
        })
        //商品选中数量
        $('#totalCount').text(checked_num)
        //计算合计
        $('#totalPrice').text(total_money.toFixed(2))

      }
      //商品数量加减(最小值为1，最大值为999)
      $('.count-c').map((i, k) => {
        // 数量减
        $(k).find('button').eq(0).click(function () {
          var num = parseInt($(this).next().val());
          num--;
          num = num < 1 ? 1 : num;
          if(num===1) {
            $(this).attr("disabled",true)
          }
          $(this).next().val(num);
          calc();
        })
        // 数量加
        $(k).find('button').eq(1).click(function () {
          var num2 = parseInt($(this).prev().val());
          num2++;
          num2 = num2 > 999 ? 999 : num2;
          $(k).find('button').eq(0).removeAttr("disabled")
          $(this).prev().val(num2);
          calc();
        })
        // 手动输入(这里可根据需要对输入的内容做正则验证)
        $(k).find('input').blur(function () {
          var num3 = parseInt($(this).val());
          num3 = num3 > 999 ? 999 : (num3 < 1 ? 1 : num3);
          $(this).val(num3);
          calc();
        })
      })
  
      //   全选
      $("#all").click(function () {
        console.log($(this).prop('checked'))
        if ($(this).prop('checked') == true) {
          $(".s_ck").prop("checked", true).parent().parent().css("background","#eee");
          $('#all').prop('checked',true);
        } else {
          $(".s_ck").prop("checked",false).parent().parent().removeAttr("style");
          $('#all').prop('checked',false);
        }
        calc();
      });

    //   删除
    $('.del').click(function(){
        $(this).parent().parent().remove();
        calc();
    })

    // 清空购物车
    $('.clear').click(function(){
        $('#carBody').children().remove();
        calc();
    })

    $('.s_ck').click(function(){
        if($(this).prop("checked")==true){
            $(this).parent().parent().css("background","#eee");
            for(let i=$('.s_ck').length-1;i>=0;i--){
                if($('.s_ck').eq(i).prop("checked")!==true){
                    continue;
                }
                $('#all').eq(i).prop('checked',true);
            }
        }else{
            $(this).parent().parent().removeAttr("style");
            $('#all').prop('checked',false);
        }
        calc();
    })
    // 删除所选
    $('.del-all').click(function(){
        for(let i=$('.s_ck').length;i>=0;i--){
            if($('.s_ck').eq(i).prop("checked")==true){
                $('.s_ck').eq(i).parent().parent().empty();
            }
        }
        calc();
    })
});

相逢太短，莫等茶凉

关注

10
点赞
踩
53

收藏

觉得还不错? 一键收藏
0
评论
jquery购物车案例

实现功能：购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景1.购物车的商品全选、计算商品总额2.全不选3.增减商品数量、修改商品小计、选中商品添加背景4.删除商品删除后：5.删除所选商品删除后：6.清空购物车清空后：代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta n
复制链接

扫一扫

专栏目录