js實現(xiàn)簡單購物車模塊

更新時間：2021年04月27日 09:56:59 作者：魏郴

這篇文章主要為大家詳細介紹了js實現(xiàn)簡單購物車模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡單購物車模塊的具體代碼，供大家參考，具體內(nèi)容如下

主要功能

輸入框正則判斷，兩位數(shù)小數(shù)，開頭可以為0
如果商品名字相同，自動數(shù)量+1，如果名字相同，價格不同，以最新價格為準（有bug，多個商品無法操作。程序混亂，隨后在改）
選住商品，或添加減少數(shù)量，都會自動更新右下角的價格和數(shù)量
結(jié)算過的商品自動消失

源碼：

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="結(jié)算">
          <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>數(shù)量</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>商品數(shù)量：</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();
      //添加數(shù)量按鈕
      $("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());
           }
      )
      //減少數(shù)量按鈕
      $($("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;
    }
    //計算總的數(shù)量
    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;
    }


    //結(jié)算
    $("#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;
        //得到名字數(shù)組
        $("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;
          }}
        //如果有相同名字，改數(shù)量和價格
        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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: