商城购买数量选择

最新推荐文章于 2021-07-02 21:57:08 发布

前端小白的江湖路

最新推荐文章于 2021-07-02 21:57:08 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 高级程序设计文章标签：商城

本文链接：https://blog.csdn.net/qq_21058391/article/details/52755378

版权

JavaScript 高级程序设计专栏收录该内容

29 篇文章

订阅专栏

1.做个商城数量选择小工具

要求的规则：

1）.输入范围限定在1-200.

2）.超过200则，则进行提示

3.）非法字符禁止输入

4.）一般在客户端验证后，服务器端还是需要重新验证的。

2.HTML

<div class="shoes-cnt">

			<div class="shoes-cnt-notice">
				数量
			</div>

			<div class="shoes-cnt-minus shoes-cnt-minus-blur">
				-
			</div>

			<div class="shoes-cnt-area">
				<input type="text" class="shoes-cnt-input" value="1"/>
			</div>

			<div class="shoes-cnt-plus">
				+
			</div>

			<div class="shoes-cnt-max">
				（限购200件）
			</div>
		</div>

3.CSS

body,input{
	margin:0;
	padding:0;
}

/*
	鞋子的数量
	----------------------------------------------------
*/

.shoes-cnt{
	margin-top:10px;
	width:100%;
	display:flex;
	display:-webkit-flex;
	height:25px;
}

.shoes-cnt-notice{
	line-height:25px;
	width:50px;
	text-align:center;
}

.shoes-cnt-minus{
	width:25px;
	height:25px;
	box-sizing:border-box;
	border:1px solid grey;
	text-align:center;
	line-height:23px;
	font-size:18px;
}

.shoes-cnt-minus-blur{
	color:#b1b1b1;
}

.shoes-cnt-area{
	width:35px;
	height:25px;
	border-top:1px solid grey;
	border-bottom:1px solid grey;
	box-sizing:border-box;
}

.shoes-cnt-input{
	width:100%;
	height:100%;
	border:none;
	outline:none;
	text-align:center;
}

.shoes-cnt-plus{
	width:25px;
	height:25px;
	box-sizing:border-box;
	border:1px solid grey;
	text-align:center;
	text-align:center;
	line-height:23px;
	font-size:18px;
}

.shoes-cnt-plus-blur{
	color:#b1b1b1;
}

.shoes-cnt-max{
	flex:1;
	line-height:25px;
	font-size:12px;
	display:none;
	color:#f23030;
}

4.JS

/*
	鞋子数量输入选择

	-------------------------------
	1.鞋子数量最大上限需要与后端共同验证
*/

//单次可以购买鞋的最大数量
var cnt_max=200;

$(".shoes-cnt-minus").click(function(){
	var input_value=$(".shoes-cnt-input").val();
	$(".shoes-cnt-input").val(--input_value);
	validateCnt();
});

$(".shoes-cnt-plus").click(function(){
	var input_value=$(".shoes-cnt-input").val();
	$(".shoes-cnt-input").val(++input_value);
	validateCnt();
});



$(".shoes-cnt-input").blur(function(){
	validateCnt();
});

$(".shoes-cnt-input").keyup(function(){
	var input_value=$(".shoes-cnt-input").val();
	if(input_value.length>2)
	{
		validateCnt();
	}
});



/*数字验证*/
function validateCnt(){
	var input_value=$(".shoes-cnt-input").val();
	$(".shoes-cnt-max").hide();
	if(isNaN(input_value))
	{
		$(".shoes-cnt-input").val(1);
		$(".shoes-cnt-minus").addClass("shoes-cnt-minus-blur");

	}else{
		if(input_value>=cnt_max)
		{
			$(".shoes-cnt-input").val(cnt_max);

			$(".shoes-cnt-max").show();
			$(".shoes-cnt-minus").removeClass("shoes-cnt-minus-blur");
			$(".shoes-cnt-plus").addClass("shoes-cnt-plus-blur");
		}

		if(input_value<=1)
		{
			$(".shoes-cnt-input").val(1);

			$(".shoes-cnt-minus").addClass("shoes-cnt-minus-blur");
		}

		if(input_value>1&&input_value<cnt_max)
		{
			$(".shoes-cnt-minus").removeClass("shoes-cnt-minus-blur");
			$(".shoes-cnt-plus").removeClass("shoes-cnt-plus-blur");
		}
	}
}