经典案例购物车 JS版

最新推荐文章于 2022-09-08 16:14:46 发布

菜鸟架构

最新推荐文章于 2022-09-08 16:14:46 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/java103/article/details/122225268

版权

经典案例试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js版本购物车

具体代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           fieldset{

               width: 800px;
               margin: auto;
           }
           tr{
                height: 50px;
                text-align: center;
           }
           #aaa{
                margin-right:550px;
           }

       </style>
   </head>
   <body>
       <fieldset id="">
           <legend>购物车</legend>
           <div id="" >
               商品名称：<input type="text" id="goodsname" value="11" />
               商品价格：<input type="text" id="goodsprice" value="1" />
               商品数量：<input type="text" id="goodsnum" value="1" />
               <button οnclick="add()">加入</button>
           </div>
           <table border="1" cellspacing="" cellpadding="" width='99%'>

                   <tr >
                       <th>全选<input type="checkbox" name="" id="chkAll" value="" οnclick="checkAll()" /></th>
                       <th>商品名称</th>
                       <th>商品价格</th>
                       <th>商品数量</th>
                       <th>商品总价</th>
                       <th>操作</th>
                   </tr>

               <tbody id="tbody">

</tbody>

           </table>
           <button type="button" id="aaa" οnclick="delcheckgoods()">删除选中</button>
           总价：<span id="zongjia">

           </span>
       </fieldset>
       <script type="text/javascript" src="jq3/js/jquery-1.8.0.min.js">

       </script>
       <script type="text/javascript">
           function add(){
               let goodnode = goodsnode.value;
               let goodname = goodsname.value;
               let goodprice = goodsprice.value;
               let goodlei = goodlei.value;
               let goodnum = goodsnum.value;
               let pan = false;
               let obj;
               let names= $(".name");
               for (var i = 0; i < names.length; i++) {
                   if(names[i].innerText == goodname){
                   pan = true;
                   obj = names[i].parentNode;
               }
           }
           if(pan == true){
               let num1 = Number(obj.children[5].children[1].innerText);
               let num2 = Number(goodnum);
               let num3 = num1+num2;
               obj.children[5].children[1].innerText = num3;
               let price = Number(obj.children[4].innerText);
               let allprice = price * num3;
               obj.children[6].innerText = allprice;

           }else{
               tr();
           }
           zj();
           }
           function tr(){
           let goodnode = goodsnode.value;
           let goodname = goodsname.value;
           let goodprice = goodsprice.value;
           let goodlei = goodlei.value;
           let goodnum = goodsnum.value;
               let tr = "<tr>";
           //   tr += "<td><input type = 'checkbox' class='ck' οnclick='ck(this)'></td>";
           tr += "<td class='node'>"+goodnode+"</td>";
               tr += "<td class='name'>"+goodname+"</td>";
               tr += "<td>"+goodprice+"</td>";
               tr += "<td>"+goodlei+"</td>";
               tr += "<td><button οnclick='jia(this)'>+</button><span>"+goodnum+"</span><button οnclick='jian(this)'>-</button></td>";
               tr += "<td>"+Number(goodprice)*Number(goodnum)+"<td>";
               tr += "<td><input type='button' value='删除' οnclick='del(this)'>";
               tr += "</tr>"
               tbody.innerHTML += tr;
               checkAll();
           }
           function del(aaaaa){
               aaaaa.parentNode.parentNode.remove();
           }
           function checkAll(){
               let status = chkAll.checked;
               let cks = $(".ck");
               for (var i = 0; i < cks.length; i++) {
                   cks[i].checked = status;
               }
               zj();
           }
           function ck(){
               let j=0;
               let cks = $(".ck");
               for (var i = 0; i < cks.length; i++) {
                   if(cks[i].checked == true){
                       j++;
                   }
               }
               if(j == cks.length){
                   chkAll.checked = true;
               }else{
                   chkAll.checked = false;
               }
               zj();
           }
           function zj(){
               let sum =0;
               let cks = $(".ck");
               for (var i = 0; i < cks.length; i++) {
                   let status = cks[i].checked;
                   if(status){
                       let renode = cks[i].parentNode.parentNode;
                       let price = renode.children[4].innerText;
                       sum += Number(price);
                   }
               }
               zongjia.innerText = sum + "yuan";
           }
           function delcheckgoods(){
               let cks = $(".ck");
               for (var i = 0; i < cks.length; i++) {
                   let status = cks[i].checked;
                   if(status){
                       cks[i].parentNode.parentNode.remove();
                   }
               }
               zj();
           }
           function jia(obj){
               let oldnum = Number(obj.nextElementSibling.innerText);
               let newnum = Number(oldnum)+1;
               obj.nextElementSibling.innerText=newnum;

               let price = Number(obj.parentNode.previousElementSibling.innerText);
               let allprice = price * newnum;
               obj.parentNode.nextElementSibling.innerText=allprice;
               zj();
           }
           function jian(obj){
               let oldnum = Number(obj.previousElementSibling.innerText);
            let newnum = Number(oldnum)-1;
           if(newnum <=1){
               obj.parentNode.parentNode.remove();
           }
           obj.previousElementSibling.innerText= newnum;
           let price = Number(obj.parentNode.previousElementSibling.innerText);
           let allprice = price * newnum;
           obj.parentNode.nextElementSibling.innerText=allprice;
           zj();
           }
       </script>
   </body>
</html>