js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車模塊

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

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

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

主要功能

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

源碼：

1.html

<body>
      <div id="head" align="center">
        <form>
          <span class="font1">名稱：</span><input type="text" id="name">
          <span class="font1">單價(jià)：</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>價(jià)格</td>
            <td>數(shù)量</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
      <div align="right" id="b">
        <span>總價(jià)：</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());
     });
   })

    //初始化每個(gè)選框選中的方法
    function initCheckBox(){
      $("tbody input[type=checkbox]").off();
      $("tbody input[type=checkbox]").on("change",function (){
        $("#Total").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
    //計(jì)算總價(jià)
    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;
    }
    //計(jì)算總的數(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("一共消費(fèi)："+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("輸入錯(cuò)誤！");
      }else {
        var GameArr = [];
        var flag = false;
        var repeat = null;
        //得到名字?jǐn)?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ù)量和價(jià)格
        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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS字符串轉(zhuǎn)換為數(shù)組的4 個(gè)方法示例小結(jié)
這篇文章主要介紹了JS字符串轉(zhuǎn)換為數(shù)組的4 個(gè)方法示例小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
詳解JavaScript堆棧與拷貝
本文主要介紹了JavaScript中的堆棧與拷貝，能更好的幫助你理解JS的內(nèi)存機(jī)制，感興趣的同學(xué)，一定要認(rèn)真看下
2021-06-06
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下
2014-07-07
基于javascript如何傳遞特殊字符
在 JavaScript 中使用反斜杠來(lái)向文本字符串添加特殊字符，下面通過(guò)本篇文章給大家介紹javascript如何傳遞特殊字符，對(duì)js傳遞特殊字符相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個(gè)大學(xué)問(wèn),頁(yè)面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對(duì)于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。
2010-09-09
前端使用正則表達(dá)式進(jìn)行校驗(yàn)的方法總結(jié)大全
很多時(shí)候我們需要校驗(yàn)用戶輸入的值是否正確,如果格式固定的,直接把錯(cuò)誤的值傳給后端顯然是不合理的,所以我們要直接在前端進(jìn)行正則校驗(yàn),這篇文章主要給大家介紹了關(guān)于前端使用正則表達(dá)式進(jìn)行校驗(yàn)的相關(guān)資料,需要的朋友可以參考下
2024-07-07
[Web]防止用戶復(fù)制頁(yè)面內(nèi)容和另存頁(yè)面的方法
原理就是利用js控制一些復(fù)制等事件，但破解也簡(jiǎn)單，這里就不說(shuō)了。
2009-02-02
js模擬點(diǎn)擊以提交表單為例兼容主流瀏覽器
我們會(huì)常常用到JS的模事件，比如說(shuō)點(diǎn)擊事件，舉個(gè)簡(jiǎn)單的例子，點(diǎn)擊表單外的“提交”按鈕來(lái)提交表單，下面為大家介紹下具體的實(shí)現(xiàn)
2013-11-11
修改css樣式style在某些情況下還是比較實(shí)用的，可以動(dòng)態(tài)改變一些樣式，接下來(lái)為大家介紹下使用JavaScript是如何做到的
2013-12-12