jQuery文本框商品数量加减代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery文本框商品数量加减代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本框商品数量加减代码</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>
<!--演示内容开始-->
<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>
<!--演示内容结束-->

</body>
</html>

JS代码(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);
}
);
}
;

附件:下载该文件资源,减少时间成本(增值服务)