怎样用js写一个简单的购物车功能？-群英

上一篇：如何用原生js写一个贪吃蛇小游戏？下一篇：怎样jquery用写一个年月日的时间选择器？

这篇文章给大家分享的是有关js实现购物车功能模块的内容，小编觉得挺实用的，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

主要功能

输入框正则判断，两位数小数，开头可以为0
如果商品名字相同，自动数量+1，如果名字相同，价格不同，以最新价格为准（有bug，多个商品无法操作。程序混乱，随后在改）
选住商品，或添加减少数量，都会自动更新右下角的价格和数量
结算过的商品自动消失

源码：

1.html

<body>
      <div id="head" align="center">
        <form>
          <span class="font1">名称：</span><input type="text" id="name">
          <span class="font1">单价：</span><input type="text" id="price">
          <input id="add1" type="button" value="添加">
          <input id="pay1" type="button" value="结算">
          <input id="set1" type="reset" value="重置">
        </form>
      </div>
      <div>
        <table border="1" id="t" >
          <thead>
          <tr align="center">
            <td><input type="checkbox" style='cursor: pointer'></td>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
      <div align="right" id="b">
        <span>总价：</span>
        <span id="Total" style="color: red">0</span>&nbsp;
        <span>商品数量：</span>
        <span id="TotalNum" style="color: red">0</span>
      </div>
</body>

2.css

 <style>
        body{
          background-color: coral;
        }
        #head{
          margin:30px auto 10px auto;
        }
        #name,#price{
          background-color: aquamarine;
        }
        #add1,#pay1,#set1{
          color: red;
          font-weight: bold;
          background-color: gold;
          cursor: pointer;
        }
        .font1{
          font-weight: bold;
          font-size: large;
        }

        #t,#b{
          border-collapse: collapse;
          margin: 30px auto;
          width: 600px;
        }
        #t thead{
          border: 3px solid gold;
          color: white;
          background-color: blue;
        }
        #t tbody{
          color: #1414bf;
          background-color: white;
        }
</style>

js部分

<script src="../lib/jquery-3.3.1.js"></script>
  <script>
    //初始化按钮
    function initButton(){
      $("input[name=j1]").off();
      $("input[name=x1]").off();
      //添加数量按钮
      $("input[name=j1]").on("click", function (){
             var num = parseInt($(this).prev().val());
        if (num > 1){
          $(this).prev().prev().attr("disabled",false);
        }
        if (num > 9){
          $(this).attr("disabled","disabled");
          return;
        }
             num++;
             if (num > 1){
               $(this).prev().prev().attr("disabled",false);
             }
             if (num > 9){
               $(this).attr("disabled","disabled");
             }
             $(this).prev().val(num);
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
           }
      )
      //减少数量按钮
      $($("input[name=x1]")).click(function (){
        var num = parseInt($(this).next().val());
        if (num-1 < 10){
          $("#add1").prop("disabled",false);
        }
        num--;
        if (num < 10){
          $(this).next().next().prop("disabled",false);
        }
        if (num == 1){
          $(this).prop("disabled","disabled");
        }
        $(this).next().val(num);
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
//初始化删除
    function initdelete(){
      $(".delete").on("click",function (){
        $(this).parent().parent().remove();
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
//全选或全不选功能
   $("thead input[type=checkbox]").on("click",function (){
     $("tbody input[type=checkbox]").each(function (index,element){
       $(this).prop("checked",$("thead input[type=checkbox]").prop("checked"));
       $("#Total").text(cal());
       $("#TotalNum").text(calNum());
     });
   })

    //初始化每个选框选中的方法
    function initCheckBox(){
      $("tbody input[type=checkbox]").off();
      $("tbody input[type=checkbox]").on("change",function (){
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
    //计算总价
    function cal(){
      var price = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var priceByOne = parseFloat($(this).parent().next().next().text());
        var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val());
        var totalMoneyByone = priceByOne * num;
        price+= totalMoneyByone ;
      });
      return price;
    }
    //计算总的数量
    function calNum(){
      var totalNum = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val());
        totalNum+=num;
      });
      return totalNum;
    }


    //结算
    $("#pay1").on("click",function (){

      alert("一共消费："+cal());
      $("thead input[type=checkbox]:checked").prop("checked",false);
      $("tbody input[type=checkbox]:checked").parent().parent().remove();


    });

    //添加
    $("#add1").on("click",function (){
      var name = $("#name").val();
      var price = $("#price").val();
      var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
      if ((name == "" || price == "") ||(!priceZ.test(price)) ){
        alert("输入错误！");
      }else {
        var GameArr = [];
        var flag = false;
        var repeat = null;
        //得到名字数组
        $("tbody").each(function (){
            var finds = $(this).find(".goodsName");
            for (let i = 0; i < finds.length; i++) {
              GameArr.push(finds.eq(i).text());
          }
        });
        for (let i = 0; i < GameArr.length; i++) {
          if (name == GameArr[i]){
            repeat = i;
            flag = true;
            break;
          }}
        //如果有相同名字，改数量和价格
        if (flag == true){
          var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1;
          if (totalNum > 9){
            $(this).attr("disabled","disabled");
          }
          $("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum);
          $("tbody:eq(" + repeat + ")").find(".goodsPrice").text(price);
          //否则拼接表格
        }else {
        var goods = "<tr>"+
             "<td><input type='checkbox' style='cursor: pointer'></td>"+
             "<td class='goodsName'>"+name+"</td>"+
             "<td class='goodsPrice'>"+price+"</td>"+
             "<td>"+
             "<input type='button' value='-' name='x1' style='cursor: pointer'>&nbsp;"+
             "<input type='text' value='1' name='num'>&nbsp;"+
             "<input type='button' value='+' name='j1' style='cursor: pointer'>"
             +"</td>"+
             '<td><a href="" class=" rel="external nofollow" delete" style="color:red">删除</a></td>' +
             "</tr>"
        $("tbody").append(goods);
        //每次添加完，绑定事件
        initButton();
        initdelete();
        initCheckBox();
      }}
    });
</script>

以上就是关于js实现购物车功能的代码，有需要的朋友可以借鉴参考，希望本文对大家有帮助，想要了解更多js实现购物车功能的内容，大家可以关注其他相关文章。

文本转载自脚本之家