首页
所有分类
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 相关文章推荐
JS常用表单验证方法总结
May 22 Javascript
JS清除选择内容的方法
Jan 29 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
js消除图片小游戏代码
Dec 11 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
蒙特卡罗(1) pdfkit(1) bufio(1) 可视化动图(1) ipyvizzu(1) vue-esign(1) map(4) 微信小程序(9) WeUI(1) Pillow(2)
You might like
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
jQuery实现点击旋转，再点击恢复初始状态动画效果示例
2018/12/11 jQuery
详解写好JS条件语句的5条守则
2019/02/28 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
vue实现表格过滤功能
2019/09/27 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
Python入门篇之对象类型
2014/10/17 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python中的面向接口编程示例详解
2021/01/17 Python
python re模块常见用法例举
2021/03/01 Python
DVF官方网站：美国时装界尊尚品牌
2017/08/29 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
我的祖国演讲稿
2014/05/04 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
护士年终个人总结
2015/02/13 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
python tkinter实现定时关机
2021/04/21 Python