html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/payfor.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* p_number */
.p_number{border:solid 1px #ddd;padding:10px 0 0 10px;width:480px;height:80px;margin:40px auto;}
.p_number .f_l{float:left;}
.p_number .add_chose{width:105px;}
.p_number .add_chose a{float:left;margin:5px 0 0 0;display:block;width:15px;height:15px;line-height:99em;overflow:hidden;background:url(images/reduce-add.gif) no-repeat;}
.p_number .add_chose a.reduce{background-position:0 0;}
.p_number .add_chose a.reduce:hover{background-position:0 -16px;}
.p_number .add_chose a.add{background-position:-16px 0;}
.p_number .add_chose a.add:hover{background-position:-16px -16px;}
.p_number .add_chose .text{float:left;margin:0 5px;display:inline;border:solid 1px #ccc;padding:4px 3px 4px 8px;width:40px;line-height:18px;font-size:14px;color:#990000;font-weight:800;}
.p_number .buy{line-height:2em;}
.p_number .buy .total-font{font-family:Arial;font-size:26px;}
.p_number .buy .jifen{margin-left:20px;color:#ACACAC;}
.p_number .buy .jifen b{margin:0 3px;}
</style>
<div class="p_number">
<div style="height:36px;font-size:16px;">商品单价：<strong id="price_item_1">￥350.00</strong></div>
<div class="f_l add_chose">
<a class="reduce" onClick="setAmount.reduce('#qty_item_1')" href="javascript:void(0)">-</a>
<input type="text" name="qty_item_1" value="1" id="qty_item_1" onKeyUp="setAmount.modify('#qty_item_1')" class="text" />
<a class="add" onClick="setAmount.add('#qty_item_1')" href="javascript:void(0)">+</a>
</div>
<div class="f_l buy">
总价：<span class="total-font" id="total_item_1">￥89.00</span>
<input type="hidden" name="total_price" id="total_price" value="" />
<span class="jifen">购买商品可获得：<b id="total_points">18</b>积分</span>
</div>
</div>payfor.js
/** jQuery Calculation Plug-in**/
(function($) {
var defaults = {reNumbers: /(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})/g, cleanseNumber: function (v) {
return v.replace(/[^0-9.\-]/g, "");
}, useFieldPlugin: (!!$.fn.getValue), onParseError: null, onParseClear: null};
$.Calculation = {version: "0.4.07",setDefaults: function(options) {
$.extend(defaults, options);
}};
$.fn.parseNumber = function(options) {
var aValues = [];
options = $.extend(options, defaults);
this.each(function () {
var $el = $(this),sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "getValue" : "val") : "text"),v = $.trim($el[sMethod]()).match(defaults.reNumbers, "");
if (v == null) {
v = 0;
if (jQuery.isFunction(options.onParseError)) options.onParseError.apply($el, [sMethod]);
$.data($el[0], "calcParseError", true);
} else {
v = options.cleanseNumber.apply(this, [v[0]]);
if ($.data($el[0], "calcParseError") && jQuery.isFunction(options.onParseClear)) {
options.onParseClear.apply($el, [sMethod]);
$.data($el[0], "calcParseError", false);
}
}
aValues.push(parseFloat(v, 10));
});
return aValues;
};
$.fn.calc = function(expr, vars, cbFormat, cbDone) {
var $this = this, exprValue = "", precision = 0, $el, parsedVars = {}, tmp, sMethod, _, bIsError = false;
for (var k in vars) {
expr = expr.replace((new RegExp("(" + k + ")", "g")), "_.$1");
if (!!vars[k] && !!vars[k].jquery) {
parsedVars[k] = vars[k].parseNumber();
} else {
parsedVars[k] = vars[k];
}
}
this.each(function (i, el) {
var p, len;
$el = $(this);
sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text");
_ = {};
for (var k in parsedVars) {
if (typeof parsedVars[k] == "number") {
_[k] = parsedVars[k];
} else if (typeof parsedVars[k] == "string") {
_[k] = parseFloat(parsedVars[k], 10);
} else if (!!parsedVars[k] && (parsedVars[k] instanceof Array)) {
tmp = (parsedVars[k].length == $this.length) ? i : 0;
_[k] = parsedVars[k][tmp];
}
if (isNaN(_[k])) _[k] = 0;
p = _[k].toString().match(/\.\d+$/gi);
len = (p) ? p[0].length - 1 : 0;
if (len > precision) precision = len;
}
try {
exprValue = eval(expr);
if (precision) exprValue = Number(exprValue.toFixed(Math.max(precision, 4)));
if (jQuery.isFunction(cbFormat)) {
var tmp = cbFormat.apply(this, [exprValue]);
if (!!tmp) exprValue = tmp;
}
} catch(e) {
exprValue = e;
bIsError = true;
}
$el[sMethod](exprValue.toString());
});
if (jQuery.isFunction(cbDone)) cbDone.apply(this, [this]);
return this;
};
$.each(["sum", "avg", "min", "max"], function (i, method) {
$.fn[method] = function (bind, selector) {
if (arguments.length == 0)return math[method](this.parseNumber());
var bSelOpt = selector && (selector.constructor == Object) && !(selector instanceof jQuery);
var opt = bind && bind.constructor == Object ? bind : {bind: bind || "keyup", selector: (!bSelOpt) ? selector : null, oncalc: null};
if (bSelOpt) opt = jQuery.extend(opt, selector);
if (!!opt.selector) opt.selector = $(opt.selector);
var self = this, sMethod, doCalc = function () {
var value = math[method](self.parseNumber(opt));
if (!!opt.selector) {
sMethod = (opt.selector.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text");
opt.selector[sMethod](value.toString());
}
if (jQuery.isFunction(opt.oncalc)) opt.oncalc.apply(self, [value, opt]);
};
doCalc();
return self.bind(opt.bind, doCalc);
}
});
var math = {sum: function (a) {
var total = 0, precision = 0;
$.each(a, function (i, v) {
var p = v.toString().match(/\.\d+$/gi), len = (p) ? p[0].length - 1 : 0;
if (len > precision) precision = len;
total += v;
});
if (precision) total = Number(total.toFixed(precision));
return total;
},avg: function (a) {
return math.sum(a) / a.length;
},min: function (a) {
return Math.min.apply(Math, a);
},max: function (a) {
return Math.max.apply(Math, a);
}};
})(jQuery);
/** ------------- choose -------------------- **/
/* reduce_add */
var setAmount = {
min:1,
max:999,
reg:function(x) {
return new RegExp("^[1-9]\\d*$").test(x);
},
amount:function(obj, mode) {
var x = $(obj).val();
if (this.reg(x)) {
if (mode) {
x++;
} else {
x--;
}
} else {
alert("请输入正确的数量！");
$(obj).val(1);
$(obj).focus();
}
return x;
},
reduce:function(obj) {
var x = this.amount(obj, false);
if (x >= this.min) {
$(obj).val(x);
recalc();
} else {
alert("商品数量最少为" + this.min);
$(obj).val(1);
$(obj).focus();
}
},
add:function(obj) {
var x = this.amount(obj, true);
if (x <= this.max) {
$(obj).val(x);
recalc();
} else {
alert("商品数量最多为" + this.max);
$(obj).val(999);
$(obj).focus();
}
},
modify:function(obj) {
var x = $(obj).val();
if (x < this.min || x > this.max || !this.reg(x)) {
alert("请输入正确的数量！");
$(obj).val(1);
$(obj).focus();
}
}
}
function BuyUrl(wid) {
var pcounts = $("input[id^=qty_item_]").val();
var patrn = /^[0-9]{1,4}$/;
if (!patrn.exec(pcounts)) {
pcounts = 1;
}
else {
if (pcounts <= 0)
pcounts = 1;
if (pcounts >= 1000)
pcounts = 999;
}
}
;
/** total_item **/
$(document).ready(function () {
$("input[name^=qty_item_]").bind("keyup", recalc);
recalc();
});
function recalc() {
$("input[id^=total_item]").val()
//产品价格统计
$("[id^=total_item]").calc(
"qty * price",
{
qty: $("input[name^=qty_item_]"),
price: $("[id^=price_item_]")
},
function (s) {
return "￥" + s.toFixed(2);
},
function ($this) {
var sum = $this.sum();
$("[id^=total_item]").text(
"￥" + sum.toFixed(2)
);
$("#total_price").val($("[id^=total_item]").text());
}
);
//产品积分统计
$("[id^=total_points]").calc(
"qty * price",
{
qty: $("input[name^=qty_item_]"),
price: $("[id^=price_item_]")
},
function (s) {
return "" + s.toFixed(0);
}
);
};