1. 首页
  2. HTML
  3. JavaScript实现html购物车代码

JavaScript实现html购物车代码

•html•阅读 4758

<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <title>购物车</title> <style> input{ width:25px; } </style> </head> <body> <div> <table cellspacing="0" cellpadding="10px"> <thead> <th><input type='checkbox'></th> <th>商品</th> <th>数量</th> <th>单价</th> <th>状态</th> <th>库存</th> <th>小计</th> </thead> <tbody> <tr> <td><input type='checkbox'></td> <td>语音电子红外体温计枪</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 69.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童防晒衣</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 109.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>小黄鸭玩具</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 9.90 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童滑板车</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 169.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>轻薄长裤</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 39.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童防蚊裤</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 29.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> </tbody> <tfoot> <tr> <td colspan="5"></td> <td>总计</td> <td class="total"></td> </tr> </tfoot> </table> </div> <script type="text/javascript"> $(".jia").click(function () { var num = $(this).prev().val(); if(num==20){ return; } $(this).prev().val(parseInt(++num)); $(this).parent().next().next().next().text(20-num) if ($(this).parent().next().next().next().text()==0) { $(this).parent().next().next().text('无货') } money () }) $(".jian").click(function () { var num = $(this).next().val(); if(num==0){ return; } $(this).next().val(parseInt(--num)); $(this).parent().next().next().next().text(20-num) $(this).parent().next().next().text('有货') money () }) function money () { var price=$('.jia').parent().next(); var num= $('.jia').prev(); var xiaoji = $('.xiaoji'); var sum = 0.0; for (var i=0;i<price.length;i++) { var price1 = parseFloat(price.eq(i).text()); var num1 = parseFloat(num.eq(i).val()); // alert(price1*num1) xiaoji.eq(i).text((price1*num1).toFixed(2)) sum+=price1*num1; } $('.total').text(sum.toFixed(2)); } </script> </body> </html>

<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <title>购物车</title> <style> input{ width:25px; } </style> </head> <body> <div> <table cellspacing="0" cellpadding="10px"> <thead> <th><input type='checkbox'></th> <th>商品</th> <th>数量</th> <th>单价</th> <th>状态</th> <th>库存</th> <th>小计</th> </thead> <tbody> <tr> <td><input type='checkbox'></td> <td>语音电子红外体温计枪</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 69.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童防晒衣</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 109.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>小黄鸭玩具</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 9.90 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童滑板车</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 169.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>轻薄长裤</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 39.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> <tr> <td><input type='checkbox'></td> <td>儿童防蚊裤</td> <td> <button class="jian">-</button> <input type="number" maxlength="2" value="0" disabled> <button class="jia">+</button> </td> <td> 29.00 </td> <td> 有货 </td> <td>20</td> <td class="xiaoji"></td> </tr> </tbody> <tfoot> <tr> <td colspan="5"></td> <td>总计</td> <td class="total"></td> </tr> </tfoot> </table> </div> <script type="text/javascript"> $(".jia").click(function () { var num = $(this).prev().val(); if(num==20){ return; } $(this).prev().val(parseInt(++num)); $(this).parent().next().next().next().text(20-num) if ($(this).parent().next().next().next().text()==0) { $(this).parent().next().next().text('无货') } money () }) $(".jian").click(function () { var num = $(this).next().val(); if(num==0){ return; } $(this).next().val(parseInt(--num)); $(this).parent().next().next().next().text(20-num) $(this).parent().next().next().text('有货') money () }) function money () { var price=$('.jia').parent().next(); var num= $('.jia').prev(); var xiaoji = $('.xiaoji'); var sum = 0.0; for (var i=0;i<price.length;i++) { var price1 = parseFloat(price.eq(i).text()); var num1 = parseFloat(num.eq(i).val()); // alert(price1*num1) xiaoji.eq(i).text((price1*num1).toFixed(2)) sum+=price1*num1; } $('.total').text(sum.toFixed(2)); } </script> </body> </html>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。