jquery插件addShopping加入购物车动画效果 jquery实现购物车

转载

数据小香 2023-08-27 19:30:29

文章标签 jquery html css 数组 文章分类 jQuery 前端开发

jQuery实现购物车功能有：

主要有添加商品

增加和减少商品数量

点击购物车时库存也相应的减少

数量的减少库存进行增加

根据增加、减少或选择的商品获取金额

实现商品价格的计算

删除把删除的数量归还到库存中

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
  
    </style>
    <script src="js/jquery-3.6.0.js"></script>
    <script src="gwc-ds.js" ></script>
   
  </head>
  <body>
    <h1>清 仓 大 甩 卖！</h1>
    <table>
      <tbody id="upGoods">
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align='center'>
          <input type='button' value='加入购物车' onclick='add_shoppingcart(this)'/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </tbody>
    </table>
  
    <h1>购 物 车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
         
        <!-- <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="10"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x" onclick="deleteGoods(this)"/></td>
        </tr> -->
        
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计:</td>
          <td id="total">0</td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>

gwc-ds.js

$(function(){
    console.log("js的外部引入")
})

var downTrDom='';
// 1.给 加入购物车 添加一个 点击事件
function add_shoppingcart(dom){
    var trDom= $(dom).parent().parent();
    // 拿第一个 td
   var goodsName=    trDom.children().eq(0).text(); 
   var goodsPrice=   trDom.children().eq(1).text(); 
   var goodskuCun=   trDom.children().eq(3).text(); 
    //下面是库存
    console.log("下面是库存"+goodskuCun);
    //点击购物车是  库存减少
    trDom.children().eq(3).text(--goodskuCun)

  // 2. 把 trDom 放入到 下面的 table表格的 goods中
    // 按需要 添加
    // 编辑一个 dom 元素
    renderTr(goodsName,goodsPrice,goodsPrice,1);

    // 1.1 遍历购物车
    var goodsTrDom= $("#goods tr");
    // 创建一个数组,用来装 产品名称
    var namesArr=new Array();
    $.each(goodsTrDom, function(index, value) {
        // 在遍历的 循环里面 去看 下面的内容和上面的内容是否有一样的.
        console.log(  )
        // 获取 $(this)的下面的 td
        //  把拿到名字 装入到 数组当中去
        namesArr.push($(this).children('td').eq(0).text() );
    })
    console.log(namesArr);
    // 做数组是否有name的判断
    var isHasName=  namesArr.indexOf(goodsName);
   // console.log(isHasName)
    if (isHasName>=0) { // 证明下面有了
        // 1. 找出 下面数量 进行 +1  ,   上面的库存 -1 , 找出金额+单价
        // 1. 定位出来 你选择的这个购物车的 tr 
       // console.log(goodsName);
       // console.log(isHasName);
        // 拿取 goods tr 对象的下面的数量
        var goodsCount= goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val() 
         var num=    Number.parseInt(goodsCount)+1;
     goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val(num); // 数量增加了
      var goodsCount1=Number.parseInt( goodsTrDom.eq(isHasName).children('td').eq(2).children().eq(1).val() );
      // 金额的公式 = 数量 * 单价
      
      console.log("下面是")
      console.log(goodsCount1)
      var tprice= goodsCount1*goodsPrice
      console.log("下面是总价")
      console.log(tprice)
    // 清空之前的, 
    goodsTrDom.eq(isHasName).remove();
      renderTr(goodsName,goodsPrice,tprice,num)
      $("#goods").prepend(downTrDom);

      //总价
        sum();
    } else {          // 下面没有
  
    $("#goods").prepend(downTrDom);
    sum();
    }

   




}
// 提取一个 Tr 
function renderTr(goodsName,goodsPrice,tprice,num){
    console.log(num)
   downTrDom= $( "<tr>" 
    +" <td>"+goodsName+"</td>"
    +" <td>"+goodsPrice+"</td>"
    +" <td align='center'>"
    +"  <input onclick='sub(this)'  type='button' value='-'/>"
    +"  <input type='text' size='3' readonly value="+num+">"
    +"  <input onclick='add(this)'  type='button' value='+'/>"
    +"  </td>"
    +"  <td>"+tprice+"</td>"
    +" <td align='center'><input type='button' onclick='del(this)' value='x'/></td>"
    +" </tr>"
    );
}

function sub(dom){
    var trDom= $(dom).parent().parent();
    console.log(trDom)
       // 拿第一个 td
   var goodsName=    trDom.children().eq(0).text(); 
   var goodsPrice=   trDom.children().eq(1).text(); 
   var goodsCount=   trDom.children().eq(2).children().eq(1).val();
   var subCount= Number.parseInt( goodsCount  )-1; 
   if(subCount==0){
       // 等于0 remove这个行,数组删除 名字
       trDom.remove();
       // 把数组中的名字删除
      // namesArr.pop(goodsName)
        //console.log(namesArr)

   }
   trDom.children().eq(2).children().eq(1).val(subCount);
 
   console.log(goodsName)
   console.log(goodsPrice)
   console.log(goodsCount)
   console.log(subCount)
    var  tprice=subCount  * goodsPrice;
    // 把tprice 输入到 金额中
    trDom.children().eq(3).text(tprice); 
   
    //数量的 减少   库存进行增加
    $.each($("#upGoods tr"), function(index, value) {
        var goodsNameUp = $(this).children().eq(0).text();
        var isTrue = goodsNameUp == goodsName;
        if(isTrue){
            //找到了就让库存增加
            var kucunCount = $(this).children().eq(3).text();
            var newKucun = Number.parseInt(kucunCount)+1;
            $(this).children().eq(3).text(newKucun);
        }
        
    });

    sum();

}


function add(dom){
    var trDom= $(dom).parent().parent();
    console.log(trDom)
       // 拿第一个 td
   var goodsName=    trDom.children().eq(0).text(); 
   var goodsPrice=   trDom.children().eq(1).text(); 
   var goodsCount=   trDom.children().eq(2).children().eq(1).val();
   var subCount= Number.parseInt( goodsCount  )+1; 
   if(subCount==0){
       // 等于0 remove这个行,数组删除 名字
       trDom.remove();
       // 把数组中的名字删除
      // namesArr.pop(goodsName)
        //console.log(namesArr)

   }
   trDom.children().eq(2).children().eq(1).val(subCount);
 
   console.log(goodsName)
   console.log(goodsPrice)
   console.log(goodsCount)
   console.log(subCount)
    var  tprice=subCount  * goodsPrice;
    // 把tprice 输入到 金额中
    trDom.children().eq(3).text(tprice); 
   
    //数量的 增加   库存进行减少
    $.each($("#upGoods tr"), function(index, value) {
        var goodsNameUp = $(this).children().eq(0).text();
        var isTrue = goodsNameUp == goodsName;
        if(isTrue){
            //找到了就让库存增加
            var kucunCount = $(this).children().eq(3).text();
            var newKucun = Number.parseInt(kucunCount)-1;
            $(this).children().eq(3).text(newKucun);
        }
        
    });

    sum();

}

//总计
var allMoney = 0;
function sum(){
    allMoney = 0;
    var trDom = $("#goods tr")
    $.each(trDom, function(index, value) {
        var newMoney = Number.parseInt($(this).children().eq(3).text());
        allMoney = newMoney+allMoney;
    })

    console.log("这是总价"+allMoney)
    //存入到表格中
    $('#total').text(allMoney)
}


function del(dom){
    var trDom = $(dom).parent().parent();
    var goodsName = trDom.children().eq(0).text()
    var count = Number.parseInt(trDom.children().eq(2).children().eq(1).val());

    console.log(count)

    //删除的话  把删除的数量归还到库存中
    $.each($("#upGoods tr"), function(index, value) {
        var goodsNameUp = $(this).children().eq(0).text();
        var isTrue = goodsNameUp == goodsName;
        if(isTrue){
            //找到了就让库存减少
            var kucunCount = $(this).children().eq(3).text();
            var newKucun = Number.parseInt(kucunCount)+count;
            $(this).children().eq(3).text(newKucun);
        }
    });


    trDom.remove();
    sum();
}

实现效果：

jquery插件addShopping加入购物车动画效果 jquery实现购物车_jquery

jQuery实现增减购物车商品信息功能有：

主要有添加商品

增加和减少商品数量

根据增加、减少或选择的商品获取金额

实现商品价格的计算

单行删除

批量删除

.toFixed(2) 保留两位小数
.toLocaleString() 保留一位小数

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>增减购物车商品信息 </title>
    <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
    <script src="./gwc.js"></script>
    <style type="text/css">
        * {
            font-size: 12px;
        }
    </style>

</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th><input type='checkbox' onclick="checkAll(this)" />全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>

        </tr>
        
        <tr class="tr_0">
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/sang.gif" class="products" /><a href="#">天堂雨伞</a>
            </td>
            <td>￥32.9元</td>
            <td>
                <img src="images/subtraction.gif" width="20" height="20" onclick="sign(this)" />
                <input type="text" class="quantity" value="1" />
                <img src="images/add.gif" width="20" height="20"  onclick="plus(this)"/>
            </td>
            <td>
                <a href="#" class="del">删除</a>
            </td>
        </tr>
        <tr id="tr2">
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/iphone.gif" class="products" /><a href="#">苹果手机iphone5</a>
            </td>
            <td>￥3339元
            </td>
            <td>
                <img src="images/subtraction.gif" width="20" height="20" onclick="signs(this)"/>
                <input type="text" class="quantity" value="1" />
                <img src="images/add.gif" width="20" height="20" onclick="pluss(this)"/>
            </td>
            <td>
                <a href="#" class="del">删除</a>
            </td>
        </tr>

    </table>

    <a href="#" id="add">添加</a>
    <a href="#" id="delBash">删除</a>


</body>

</html>

gwc.js

//全选  全不选
function checkAll(data) {
    var isTrue = $(data).prop('checked')
    var checkDom = $("table tr td input")
    if (isTrue) {
        $.each(checkDom, function (index, value) {
            $(this).prop('checked', true);
        })
    } else {
        $.each(checkDom, function (index, value) {
            $(this).prop('checked', false);
        })
    }
}





//减号
function sign(btn) {
    //获取按钮的哥哥的值(数量)
    var amount = $(btn).next().val();
    if (amount >= 2) {
        //数量-1，再写回文本框
        $(btn).next().val(--amount);
        //获取金额
        //var price = $(btn).parent().prev().html();

        //.toFixed(2)   保留两位小数
        //.toLocaleString() 保留一位小数

        //计算金额，再写入按钮的父亲的弟弟内
        var num = $(btn).parent().prev().html("￥" + (amount * 32.9).toFixed(2) + "元");
       

    }
}
function signs(btn) {
    var amount = $(btn).next().val();
    if (amount >= 2) {
        $(btn).next().val(--amount);
        var num = $(btn).parent().prev().html("￥" + (amount * 3339).toFixed(2) + "元");
    }
}

//加号
function plus(btn) {
    //获取按钮的哥哥的值(数量)
    var amount = $(btn).prev().val();

    //数量+1，再写回文本框
    $(btn).prev().val(++amount);


    //计算金额，再写入按钮的父亲的弟弟内
     $(btn).parent().prev().html("￥" + (amount * 32.9).toFixed(2) + "元");


}
function pluss(btn) {
    var amount = $(btn).prev().val();
    $(btn).prev().val(++amount);
    $(btn).parent().prev().html("￥" + (amount * 3339).toFixed(2) + "元");
    
}




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

    //批量删除
    $("#delBash").click(function () {
        $("table tr td input:checked").each(function (index, value) {
            $(this).parent().parent().remove();
        })
    })

    //添加
    $("#add").click(function () {
        var yi = $('.tr_0 td:eq(3) input').val()
        var er = $('#tr2 td:eq(3) input').val()
        if (yi == er) {
            add1()
        }
        if (yi > er) {
            add2()
        } else {
            add1()
        }

    })

})


function add1() {
    var yi = $('.tr_0 td:eq(3) input').val()
    var plus = $('.tr_0 td:eq(3) img').prev().val(++yi)
    var num = $(plus).parent().prev().html('￥' + (amount * 32.9).toFixed(2)+ '元')
    num = num.toFixed(2);
}
function add2() {
    var yi = $('#tr2 td:eq(3) input').val()
    var plus = $('#tr2 td:eq(3) img').prev().val(++yi)
    $(plus).parent().prev().html('￥' + (amount * 3339).toFixed(2) + '元')
}