夏日博客

A-A+

用jQuery实现的购物车自动结算付款金额的实例源

2016年01月12日 前端设计 暂无评论 阅读 8 views 次

我们在淘宝网购物进入购物车时，如果修改了商品数量，或者删除了商品，付款总金额会自动结算，现在我们来用jQuery模拟实现这个功能，后面有全部源码。

jQuery实现购物车表单自动结算，用户把所购商品的数量输入进去，就可以自动计算出商品总额，金额+运费，类似淘宝的购物车结算功能，计算过程是适时的，用jquery实现了Ajax不刷新网页就计算的功能，做购物类网站的或许可以用上这个例子。

全部源代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>jQuery购物车表单自动结算</title>  
  6. <style>  
  7. *{margin:0;padding:0;}  
  8. body{font:12px "Lucida Grande", Helvetica, Sans-Serif;padding:50px;}  
  9. table{border-colla<a href="/fw/photo.html" target="_blank">ps</a>e:collapse;}  
  10. #order-table{width:100%;}  
  11. #order-table td{padding:5px;}  
  12. #order-table th{padding:5px;background:black;color:white;text-align:left;}  
  13. #order-table td.row-total{text-align:right;}  
  14. #order-table td input{width:75px;text-align:center;}  
  15. #order-table tr.even td{background:#eee;}  
  16. #order-table td .total-box,.total-box{border:3px solid green;width:70px;padding:3px;margin:5px 0 5px 0;text-align:center;font-size:14px;}  
  17. #shipping-subtotal{margin:0;}  
  18. #shipping-table{width:350px;float:right;}  
  19. #shipping-table td{padding:5px;}  
  20. #shipping-table th{padding:5px;background:black;color:white;text-align:left;}  
  21. #shipping-table td input{width:69px;text-align:center;}  
  22. #order-total{font-weight:bold;font-size:21px;width:110px;}  
  23. </style>  
  24. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="jquery-1.6.2.min.js"></script>  
  25. <script type="text/javascript">  
  26. function IsNumeric(sText)  
  27. {  
  28.  var ValidChars = "0123456789.";  
  29.  var IsNumber=true;  
  30.  var Char;  
  31.  for (i = 0; i < sText.length && IsNumber == true; i++)  
  32.  {  
  33.  Char = sText.charAt(i);  
  34.  if (ValidChars.indexOf(Char) == -1)  
  35.   {  
  36.   IsNumber = false;  
  37.   }  
  38.  }  
  39.  return IsNumber;  
  40. };  
  41. function calcProdSubTotal() {  
  42.  var prodSubTotal = 0;  
  43.  $(".row-total-input").each(function(){  
  44.  var valString = $(this).val() || 0;  
  45.  prodSubTotal += parseInt(valString);  
  46.  });  
  47.  $("#product-subtotal").val(prodSubTotal);  
  48. };  
  49. function calcTotalPallets() {  
  50.  var totalPallets = 0;  
  51.  $(".num-pallets-input").each(function() {  
  52.  var thisValue = $(this).val();  
  53.  if ( (IsNumeric(thisValue)) && (thisValue != '') ) {  
  54.   totalPallets += parseInt(thisValue);  
  55.  };  
  56.  });  
  57.  $("#total-pallets-input").val(totalPallets);  
  58. };  
  59. function calcShippingTotal() {  
  60.  var totalPallets = $("#total-pallets-input").val() || 0;  
  61.  var shippingRate = $("#shipping-rate").text() || 0;  
  62.  var shippingTotal = totalPallets * shippingRate;  
  63.  $("#shipping-subtotal").val(shippingTotal);  
  64. };  
  65. function calcOrderTotal() {  
  66.  var orderTotal = 0;  
  67.  var productSubtotal = $("#product-subtotal").val() || 0;  
  68.  var shippingSubtotal = $("#shipping-subtotal").val() || 0;  
  69.  var orderTotal = parseInt(productSubtotal) + parseInt(shippingSubtotal);  
  70.  var orderTotalNice = "$" + orderTotal;  
  71.  $("#order-total").val(orderTotalNice);  
  72. };  
  73. $(function(){  
  74.  $('.num-pallets-input').blur(function(){  
  75.  var $this = $(this);  
  76.  var numPallets = $this.val();  
  77.  var multiplier = $this  
  78.     .parent().parent()  
  79.     .find("td.price-per-pallet span")  
  80.     .text();  
  81.  if ( (IsNumeric(numPallets)) && (numPallets != '') ) {  
  82.   var rowTotal = numPallets * multiplier;  
  83.   $this  
  84.   .css("background-color", "white")  
  85.   .parent().parent()  
  86.   .find("td.row-total input")  
  87.   .val(rowTotal);  
  88.  } else {  
  89.   $this.css("background-color", "#ffdcdc");  
  90.  };  
  91.  calcProdSubTotal();  
  92.  calcTotalPallets();  
  93.  calcShippingTotal();  
  94.  calcOrderTotal();  
  95.  });  
  96. });  
  97. </script>  
  98. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>  
  99. <body>  
  100. <h1>jQuery购物车自动计算表单金额</h1>  
  101. <table id="order-table">  
  102.  <tr>  
  103.   <th>商品名称</th>  
  104.   <th>数量</th>  
  105.   <th>X</th>  
  106.   <th>单价</th>  
  107.   <th>=</th>  
  108.   <th style="text-align: right;">总计</th>  
  109.  </tr>  
  110.  <tr class="odd">  
  111.   <td class="product-title">裤子</td>  
  112.   <td class="num-pallets">  
  113.    <input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets" ></input>  
  114.   </td>  
  115.   <td class="times">X</td>  
  116.   <td class="price-per-pallet">$<span>340</span></td>  
  117.   <td class="equals">=</td>  
  118.   <td class="row-total">  
  119.    <input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled"></input>  
  120.   </td>  
  121.  </tr>  
  122.  <tr class="even">  
  123.   <td class="product-title">袜子</td>  
  124.   <td class="num-pallets">  
  125.    <input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets"></input>  
  126.   </td>  
  127.   <td class="times">X</td>  
  128.   <td class="price-per-pallet">$<span>455</span></td>  
  129.   <td class="equals">=</td>  
  130.   <td class="row-total">  
  131.    <input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled"></input>  
  132.   </td>  
  133.  </tr>  
  134.  <tr class="odd">  
  135.   <td class="product-title">婴儿用品</td>  
  136.   <td class="num-pallets">  
  137.    <input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets" ></input>  
  138.   </td>  
  139.   <td class="times">X</td>  
  140.   <td class="price-per-pallet">$<span>300</span></td>  
  141.   <td class="equals">=</td>  
  142.   <td class="row-total">  
  143.    <input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled"></input>  
  144.   </td>  
  145.  </tr>  
  146.  <tr class="even">  
  147.   <td class="product-title">电脑用品</td>  
  148.   <td class="num-pallets">  
  149.    <input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets"></input>  
  150.   </td>  
  151.   <td class="times">X</td>  
  152.   <td class="price-per-pallet">$<span>410</span></td>  
  153.   <td class="equals">=</td>  
  154.   <td class="row-total">  
  155.    <input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled"></input>  
  156.   </td>  
  157.  </tr>  
  158.  <tr class="odd">  
  159.   <td class="product-title">汽车装饰用品</td>  
  160.   <td class="num-pallets">  
  161.    <input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets" ></input>  
  162.   </td>  
  163.   <td class="times">X</td>  
  164.   <td class="price-per-pallet">$<span>365</span></td>  
  165.   <td class="equals">=</td>  
  166.   <td class="row-total">  
  167.    <input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled"></input>  
  168.   </td>  
  169.  </tr>  
  170.  <tr class="even">  
  171.   <td class="product-title">家居装饰用品</em></td>  
  172.   <td class="num-pallets">  
  173.    <input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets"></input>  
  174.   </td>  
  175.   <td class="times">X</td>  
  176.   <td class="price-per-pallet">$<span>340</span></td>  
  177.   <td class="equals">=</td>  
  178.   <td class="row-total">  
  179.    <input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled"></input>  
  180.   </td>  
  181.  </tr>  
  182.  <tr class="odd">  
  183.   <td class="product-title">生活用品</td>  
  184.   <td class="num-pallets">  
  185.    <input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets" ></input>  
  186.   </td>  
  187.   <td class="times">X</td>  
  188.   <td class="price-per-pallet">$<span>375</span></td>  
  189.   <td class="equals">=</td>  
  190.   <td class="row-total">  
  191.    <input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled"></input>  
  192.   </td>  
  193.  </tr>  
  194.  <tr class="even">  
  195.   <td class="product-title">建材用品</td>  
  196.   <td class="num-pallets">  
  197.    <input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets"></input>  
  198.   </td>  
  199.   <td class="times">X</td>  
  200.   <td class="price-per-pallet">$<span>340</span></td>  
  201.   <td class="equals">=</td>  
  202.   <td class="row-total">  
  203.    <input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled"></input>  
  204.   </td>  
  205.  </tr>  
  206.  <tr>  
  207.   <td colspan="6" style="text-align: right;">产品小计:  
  208.    <input type="text" class="total-box" id="product-subtotal" disabled="disabled"></input>  
  209.   </td>  
  210.  </tr>  
  211. </table>  
  212. <table id="shipping-table">  
  213.  <tr>  
  214.   <th>总数量.</th>  
  215.   <th>X</th>  
  216.   <th>运费</th>  
  217.   <th>=</th>  
  218.   <th style="text-align: right;">总运费</th>  
  219.  </tr>  
  220.  <tr>  
  221.   <td id="total-pallets">  
  222.    <input id="total-pallets-input" type="text" disabled="disabled"></input>  
  223.   </td>  
  224.   <td>X</td>  
  225.   <td id="shipping-rate">10.00</td>  
  226.   <td>=</td>  
  227.   <td style="text-align: right;">  
  228.   <input type="text" class="total-box" id="shipping-subtotal" disabled="disabled"></input>  
  229.   </td>  
  230.  </tr>  
  231. </table>  
  232. <div class="clear"></div>  
  233. <div style="text-align:right;">  
  234.  <span>订单总额: </span>  
  235.  <input type="text" class="total-box" id="order-total" disabled="disabled"></input>  
  236.  <br /><br />  
  237.  <input type="submit" value="提交结账" class="submit" />  
  238. </div>  
  239. </body>  
  240. </html>  

本实例应用比较广范，在一般的电子商务网站都会有应用，我们可以通过这个实例，开发出更好的购物车。

标签：

给我留言