javascript实现简单购物车功能(有图) 朱雀 2022-05-17 09:54 161阅读 0赞 Js实现淘宝购物车类似功能: 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> </head> <style type="text/css"> h1{ text-align: center; } table{ margin: 0 auto; } body{ font-size: larger;color: crimson; background-image: url(img/2.jpg); background-repeat: no-repeat; background-size: 100%; } table th,table td{ } </style> <body > <h1>购物车byLD</h1> <table border="1" > <tr> <!--文本th--> <th>商品</th> <th >单价</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>面膜</td> <td >150</td> <td>白色</td> <td>100</td> <td>88%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/> </td> </tr> <tr> <td>口红</td> <td >350</td> <td>白色</td> <td>166</td> <td>82%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/> </td> </tr> <tr> <td>鼠标</td> <td >150</td> <td>黑色</td> <td>99</td> <td>75%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/> </td> </tr> <tr> <td>键盘</td> <td >120</td> <td>黑色</td> <td>50</td> <td>80%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/> </td> </tr> </table> <h1> 结算【剁手吧】</h1> <table border="1"> <thead> <tr> <th>商品</th> <th >单价</th> <th>数量</th> <th>金额</th> <th>删除</th> </tr> </thead> <tbody id="goods"> <!--<tr> <td>面膜</td> <td>150</td> <td align="center"> <input type="button" value="-" id="jian" onclick="change(this,-1);"/>--> <!--readonly规定输入字段为只读--> <!--<input id="text" type="text" size="1" value="1" readonly="readonly" /> <input type="button" value="+" id="add" onclick="change(this,1);"/> </td> <td> <input id="money" size="1" value="80"></input></td> <td align="center"> <input type="button" value="X" onclick="del(this)" /> </td> </tr>--> </tbody> <tfoot> <tr> <td colspan="3" align="center" >总计</td> <td id="total"></td> <td>元</td> </tr> </tfoot> </table> </body> <script type="text/javascript"> //this js中指当前对象 function add_shoppingcar(btn){ var tr=btn.parentNode.parentNode; var tds=tr.getElementsByTagName("td"); var name=tds[0].innerHTML; var price=tds[1].innerHTML; var tbody=document.getElementById("goods"); var row=tbody.insertRow();//insertRow表格开头插入新行 row.innerHTML="<td>"+name+"</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='-' id='jian' onclick='change(this,-1)' />"+ "<input id='text' type='text' size='1' value='1' readonly='readonly' />"+ "<input type='button' value='+' id='add' onclick='change(this,1)' />"+ "</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='X' onclick='del(this)'/>"+ "</td>"+ "</tr>" total(); } //增加减少数量,用n正负1来表示点击了加减按钮 function change(btn,n){ //获取数量的三个input对象 var inputs = btn.parentNode.getElementsByTagName("input"); //获取原来的数量 var amount = parseInt(inputs[1].value); //当amount=1时不能再点击"-"符号 //用n<0来表示点击了减button if(amount<=1 && n<0){ return; } //根据加减来改变数量 inputs[1].value = amount + n; //将改变后的数量值赋值给amount amount = inputs[1].value; //获取表格中的行 var tr = btn.parentNode.parentNode; //获取所有的列 var tds = tr.getElementsByTagName("td"); //获取单价 var price = parseFloat(tds[1].innerHTML); //总价=单价*数量 var m = price * amount; //将总价赋值给相应的位置 tds[3].innerHTML = m; //调用total方法,求总计 total(); } function total(){ var tbody=document.getElementById("goods"); var trs=tbody.getElementsByTagName("tr"); var sum=0; for(var i=0;i<trs.length;i++){ var tds=trs[i].getElementsByTagName("td"); var m=tds[3].innerHTML; sum += parseFloat(m); } var total=document.getElementById("total"); total.innerHTML = sum; } function del(i){ var tr=i.parentNode.parentNode; tr.parentNode.removeChild(tr); //tr.remove(tr); total(); } </script> </html> 实现效果: ![这里写图片描述][70]\-----------------------------2020.01.07更新------------------------ ![在这里插入图片描述][2020010716244419.png] 这个代码是一年多前写的了,评论有很多说复制代码有问题的,加号X号不能点击的 ,我复制了一遍运行了也还是没啥问题。。。 最新gif图,由于没有图片,看上去真是贼丑。。。 ![在这里插入图片描述][20200107171100833.gif] [70]: /images/20220517/cde01f9ac8c8443b935566d2892525e2.png [2020010716244419.png]: /images/20220517/7db6a53d50a2424aac38df3d7ff90971.png [20200107171100833.gif]: /images/20220517/6ecd7506ccb64371899cdfe4abeb4a8c.png
还没有评论,来说两句吧...