首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现购物车表单自动结算效果实例

Posted in Javascript onAugust 10, 2015

本文实例讲述了jQuery实现购物车表单自动结算效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

jQuery实现购物车表单自动结算效果实例

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery购物车表单自动结算</title>
<style>
*{margin:0;padding:0;}
body{font:12px "Lucida Grande", Helvetica, Sans-Serif;padding:50px;}
table{border-collapse:collapse;}
#order-table{width:100%;}
#order-table td{padding:5px;}
#order-table th{padding:5px;background:black;color:white;text-align:left;}
#order-table td.row-total{text-align:right;}
#order-table td input{width:75px;text-align:center;}
#order-table tr.even td{background:#eee;}
#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;}
#shipping-subtotal{margin:0;}
#shipping-table{width:350px;float:right;}
#shipping-table td{padding:5px;}
#shipping-table th{padding:5px;background:black;color:white;text-align:left;}
#shipping-table td input{width:69px;text-align:center;}
#order-total{font-weight:bold;font-size:21px;width:110px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function IsNumeric(sText)
{
 var ValidChars = "0123456789.";
 var IsNumber=true;
 var Char;
 for (i = 0; i < sText.length && IsNumber == true; i++)
 {
 Char = sText.charAt(i);
 if (ValidChars.indexOf(Char) == -1)
  {
  IsNumber = false;
  }
 }
 return IsNumber;
};
function calcProdSubTotal() {
 var prodSubTotal = 0;
 $(".row-total-input").each(function(){
 var valString = $(this).val() || 0;
 prodSubTotal += parseInt(valString);
 });
 $("#product-subtotal").val(prodSubTotal);
};
function calcTotalPallets() {
 var totalPallets = 0;
 $(".num-pallets-input").each(function() {
 var thisValue = $(this).val();
 if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
  totalPallets += parseInt(thisValue);
 };
 });
 $("#total-pallets-input").val(totalPallets);
};
function calcShippingTotal() {
 var totalPallets = $("#total-pallets-input").val() || 0;
 var shippingRate = $("#shipping-rate").text() || 0;
 var shippingTotal = totalPallets * shippingRate;
 $("#shipping-subtotal").val(shippingTotal);
};
function calcOrderTotal() {
 var orderTotal = 0;
 var productSubtotal = $("#product-subtotal").val() || 0;
 var shippingSubtotal = $("#shipping-subtotal").val() || 0;
 var orderTotal = parseInt(productSubtotal) + parseInt(shippingSubtotal);
 var orderTotalNice = "$" + orderTotal;
 $("#order-total").val(orderTotalNice);
};
$(function(){
 $('.num-pallets-input').blur(function(){
 var $this = $(this);
 var numPallets = $this.val();
 var multiplier = $this
    .parent().parent()
    .find("td.price-per-pallet span")
    .text();
 if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
  var rowTotal = numPallets * multiplier;
  $this
  .css("background-color", "white")
  .parent().parent()
  .find("td.row-total input")
  .val(rowTotal);
 } else {
  $this.css("background-color", "#ffdcdc");
 };
 calcProdSubTotal();
 calcTotalPallets();
 calcShippingTotal();
 calcOrderTotal();
 });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<h1>jQuery购物车自动计算表单金额</h1>
<table id="order-table">
 <tr>
  <th>商品名称</th>
  <th>数量</th>
  <th>X</th>
  <th>单价</th>
  <th>=</th>
  <th style="text-align: right;">总计</th>
 </tr>
 <tr class="odd">
  <td class="product-title">裤子</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">袜子</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>455</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">婴儿用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>300</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">电脑用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>410</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">汽车装饰用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>365</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">家居装饰用品</em></td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">生活用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>375</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">建材用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr>
  <td colspan="6" style="text-align: right;">产品小计:
   <input type="text" class="total-box" id="product-subtotal" disabled="disabled"></input>
  </td>
 </tr>
</table>
<table id="shipping-table">
 <tr>
  <th>总数量.</th>
  <th>X</th>
  <th>运费</th>
  <th>=</th>
  <th style="text-align: right;">总运费</th>
 </tr>
 <tr>
  <td id="total-pallets">
   <input id="total-pallets-input" type="text" disabled="disabled"></input>
  </td>
  <td>X</td>
  <td id="shipping-rate">10.00</td>
  <td>=</td>
  <td style="text-align: right;">
  <input type="text" class="total-box" id="shipping-subtotal" disabled="disabled"></input>
  </td>
 </tr>
</table>
<div class="clear"></div>
<div style="text-align:right;">
 <span>订单总额: </span>
 <input type="text" class="total-box" id="order-total" disabled="disabled"></input>
 <br /><br />
 <input type="submit" value="提交结账" class="submit" />
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery实现购物车表单自动结算效果实例

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 #Javascript
jQuery中$(function() {});问题详解
Aug 10 #Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
hmac(1) Mint UI(1) exists(2) mt-swipe(1) 慢日志(1) 相对路径 (1) 相对路径(1) 面向对象(3) openpyxl(1) requests(1)
You might like
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
微信支付开发发货通知实例
2016/07/12 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
JS前端开发判断是否是手机端并跳转操作（小结）
2017/02/05 Javascript
jQuery实现多张图片上传预览（不经过后端处理）
2017/04/29 jQuery
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
使用pygame实现垃圾分类小游戏功能（已获校级二等奖）
2020/07/23 Python
英国的一家创新礼品和小工具零售商：Menkind
2019/08/24 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
教师申诉制度
2014/01/29 职场文书
红旗方阵解说词
2014/02/12 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
监察建议书
2015/02/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python