jQuery实现购物车表单自动结算效果实例_jquery_脚本之家

正文实例汇报了jQuery实现购物车表单自动付钱效果。分享给大家供大家参谋。具体如下:

本文实例为我们享受了jQuery完毕购物车结账功效体现的绘声绘色代码,供我们参谋,具体内容如下

生机勃勃、功效描述:

本文实例陈说了jQuery基于cookie完成的购物车。分享给我们供大家参谋,具体如下:

日常来说所示:

那边jQuery完结购物车表单自动买下账单,只要顾客把所购商品的多寡输入进去,就足以合时总计出商品总额,金额+运费,肖似Tmall的购物车结账功用,总结进度是及时的,用jquery完结了Ajax不刷新网页就总计的功力,做购物类网址的恐怕能够用上那个例子。

     /*删除*/ ${ $.bind{ $.parent; totalPrice; /*当鼠标离开文本框时,获取当前值,调用totalPrice()函数进行结算*/ $(".shopping_product_list_5 input").bind{ var t = $; totalPrice; var allPrice = 0; var allReduce = 0; var allCount = 0; $.each{ /*循环购物车列表的每一行*/ var num = parseInt.find(".shopping_product_list_5 input").val; /*获取文本框中数量值*/ var price = parseFloat.find(".shopping_product_list_4 label").text; /* 获取商品价格*/ var total = price * num; allPrice += total; /*计算所有商品的总价格*/ /*获取节省的金额*/ var reduce = parseFloat.find(".shopping_product_list_3 label").text - parseFloat.find(".shopping_product_list_4 label").text; var reducePrice = reduce*num; allReduce +=reducePrice; /*获取积分*/ var count = parseFloat.find(".shopping_product_list_2 label").text; allCount +=count; }); $.text; /*填写计算结果,其中利用toFixed()函数保留两位小数*/ $.text; $.text;}); function totalPrice(){ var allPrice = 0; var allReduce = 0; var allCount = 0; $.each{ var num = parseInt.find(".shopping_product_list_5 input").val; var price = parseFloat.find(".shopping_product_list_4 label").text; var total = price * num; allPrice += total; var reduce = parseFloat.find(".shopping_product_list_3 label").text - parseFloat.find(".shopping_product_list_4 label").text; var reducePrice = reduce*num; allReduce +=reducePrice; var count = parseFloat.find(".shopping_product_list_2 label").text; allCount +=count; }); $.text; $.text; $.text; }    您已选购以下商品    商品名

1、点击购买按键,模拟抛物线将货品弹到购物车上;

此地剖析了jquery购物车原理,包含丰盛商品及数据到购物车 cookie
中,决断购物车中有无商品,假诺有,则把json字符串调换到对象,再次来到当前商品在
cookie 中的总量。

//表单填充 , formDataLoad: function  { for  { if (obj.hasOwnProperty { if ($("#" + domId + " [name='" + property + "']").size { $("#" + domId + " [name='" + property + "']").each { var dom = this; if  == "radio") { $.filter("[value='" + obj[property] + "']").attr; } if  == "checkbox") { obj[property] == true ? $.attr : $.attr.removeAttr; } if  == "text" || $ == "SELECT" || $ == "hidden" || $ == "textarea") { $.val; } if .prop == "TEXTAREA") { $.val; } } } }
jQuery购物车表单自动结算*{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;}function IsNumeric{ var ValidChars = "0123456789."; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt; if (ValidChars.indexOf { IsNumber = false; } } return IsNumber;};function calcProdSubTotal() { var prodSubTotal = 0; $.each{ var valString = $ || 0; prodSubTotal += parseInt; $.val;};function calcTotalPallets() { var totalPallets = 0; $.each { var thisValue = $; if (  &&  { totalPallets += parseInt; $("#total-pallets-input").val;};function calcShippingTotal() { var totalPallets = $("#total-pallets-input").val() || 0; var shippingRate = $.text() || 0; var shippingTotal = totalPallets * shippingRate; $.val;};function calcOrderTotal() { var orderTotal = 0; var productSubtotal = $.val() || 0; var shippingSubtotal = $.val() || 0; var orderTotal = parseInt + parseInt; var orderTotalNice = "$" + orderTotal; $.val;};${ $.blur{ var $this = $; var numPallets = $this.val(); var multiplier = $this .parent .find("td.price-per-pallet span") .text(); if ( ) &&  { var rowTotal = numPallets * multiplier; $this .css("background-color", "white") .parent .find .val; } else { $this.css("background-color", "#ffdcdc"); }; calcProdSubTotal; calcShippingTotal; });});jQuery购物车自动计算表单金额

单品积分

2、购物车加多货品后,呈现+1动漫;

$.hide();var PId = $; // 商品的IDvar PName = $; // 商品名称var PMemberPrice = $.text(); // 会员价var PAmount = 1;var jsonStr = "[{'PId':'" + PId + "','PName':'" + PName + "','PMemberPrice':'" + PMemberPrice + "','PAmount':'" + PAmount + "'}]";//将商品放入购物车$.click{setCookie;

var setCookie = function{if (typeof value != 'undefined') { // name and value given, set cookieoptions = options || {};if  {value = '';options.expires = -1;}var expires = '';if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {var date;if (typeof options.expires == 'number') {date = new Date();date.setTime + (options.expires * 24 * 60 * 60 * 1000));} else {date = options.expires;}expires = '; expires=' + date.toUTCString();}var path = options.path ? '; path=' +  : '';var domain = options.domain ? '; domain=' +  : '';var secure = options.secure ? '; secure' : '';

如上那篇基于jQuery的表单填充实例正是小编共享给大家的全部内容了,希望能给大家一个参照,也冀望大家多多点拨脚本之家。

商品名称

市场价

1、导入jquery相关的包:

期望本文所述对大家jQuery程序设计有所扶植。

数量

当当价

2、html文件内容:

X

数量

jQuery实现模拟天猫加入购物车飞入动画效果    土豪,请猛击我,加入购物车        购物车  

.demo{width:820px; margin:60px auto 10px auto}.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 85px;height: 100%;font-size: 12px;color: #fff;}.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}.cart span{display:block;width:20px;margin:10 0 0 0;}.cart i{width:50px;height:35px;display:block; background:url no-repeat;}#msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}.box{width:300px; height:150px; border:1px solid #e0e0e0; text-align:center}.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}.button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba; -moz-box-shadow: 0 1px 2px rgba; box-shadow: 0 1px 2px rgba;}.button:hover { text-decoration: none;}.button:active { position: relative; top: 1px;}/* orange */.orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}.orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');}.orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}</pre><p>4、核心的JQuery代码:</p><pre ><script>//实现购物车+1动画效果 { $.extend({ tipsBox: function  { options = $.extend({ obj: null, //jq对象,要在那个html标签上显示 str: "+1", //字符串,要显示的内容 startSize: "18px", //动画开始的文字大小 endSize: "38px", //动画结束的文字大小 interval: 600, //动画时间间隔 color: "red", //文字颜色 callback: function () { } //回调函数 }, options); $.append("" + options.str + ""); var box = $; var left = options.obj.offset().left + options.obj.width() / 2; var top = options.obj.offset().top - options.obj.height(); box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": options.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt + "px" }, options.interval, function ; options.callback;function niceIn.addClass; setTimeout{ prop.find.removeClass;}//实现抛物线动画功能$ { var offset = $; $.click{ var addcar = $; var img = "images/lg.jpg"; var flyer = $('<img src="'+img+'">'); flyer.fly({ start: { left: event.pageX, top: event.pageY }, end: { left: offset.left+10, top: offset.top+10, width: 0, height: 0 }, onEnd: function(){ $.tipsBox, str: "<b style='font-family:Microsoft YaHei;'>+1</b>", callback: function ; niceIn;});</script></pre><p>以上所述是小编给大家介绍的jQuery模拟实现天猫购物车动画效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!</p>

单价

删除

=

私募(首部披露资本博弈秘密的金融… 189 ¥32.00 ¥18.90 删除
小团圆 173 ¥28.00 ¥17.30 删除
不抱怨的世界(畅销全球80国的世界… 154 ¥24.80 ¥15.40 删除
福玛特双桶洗衣机XPB20-07S 358 ¥458.00 ¥358.00 删除
PHP和MySQL Web开发 712 ¥95.00 ¥71.20 删除
法布尔昆虫记(再买¥68.30即可参加“满199元减10元现金”活动) 10 ¥198.00 ¥130.70 删除

总计

清空购物车

裤子

  • 货色金额总共:
  • 你共节约金额:¥
    可获商品积分:

X

上述正是本文的全部内容,希望对我们的上学抱有助于,也期望大家多多点拨脚本之家。

$340

=

袜子

X

$455

=

婴孩用品

X

$300

=

微型机用品

X

$410

=

小车装饰用品

X

$365

=

家装用品

X

$340

=

生活用品

X

$375

=

建筑材料用品

X

$340

=

成品小计:

总数量. X 运费 = 总运费
X 10.00 =

订单总额:

可望本文所述对我们的jquery程序设计有所支持。

发表评论

电子邮件地址不会被公开。 必填项已用*标注