文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js如何实现简单购物车模块

2023-06-14 21:21

关注

这篇文章主要介绍js如何实现简单购物车模块,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体内容如下

js如何实现简单购物车模块

主要功能

源码:

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" >0</span>&nbsp;        <span>商品数量:</span>        <span id="TotalNum" >0</span>      </div></body>

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" >删除</a></td>' +             "</tr>"        $("tbody").append(goods);        //每次添加完,绑定事件        initButton();        initdelete();        initCheckBox();      }}    });</script>

以上是“js如何实现简单购物车模块”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯