点击加减号改变input值

最新推荐文章于 2023-09-13 23:27:08 发布

Too_sober

最新推荐文章于 2023-09-13 23:27:08 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Too_sober/article/details/89519772

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个简单的HTML、CSS和JavaScript实现的数量增减功能，通过按钮操作更新输入框中的数值，同时限制数值不能为负。该功能常见于电商网站的商品数量选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样例
在这里插入图片描述
点击上按钮数量增加
点击下按钮数量减少但不能为负数
html

<label for="" class="label1">兑换数量:</label>
<input type="text" class="inputs" id="num" value="0">
<span class="num">
		<a class="up" id="max"></a>
		<a class="down" id="min"></a>
</span>
<div class="count">
			件  &nbsp;&nbsp;&nbsp;库存<span>1234561</span>件
</div>

css

.label1,.inputs,.num,.count{
	display: inline-block;
}
.num{
	width: 20px;
	height: 30px;
	vertical-align: middle;
}
.up{
	width: 20px;
	height: 15px;
	display: block;
	background: url('public/assets/images/integral/tjsz.jpg') no-repeat;
	background-position: 0px 0px;
}
.down{
	width: 20px;
	height: 15px;
	display: block;
	background: url('public/assets/images/integral/tjsz.jpg') no-repeat;
	background-position: 0px -16px;
}

$(document).ready(function(){
		/*加一减一按钮*/
		$("#max").click(function(){
		var oldValue=parseInt($('#num').val());//取出现在的值，并使用parseInt转为int类型数据
		oldValue++;//自加1
		$('#num').val(oldValue);//将增加后的值付给原控件
		});
		$("#min").click(function(){
		var oldValue=parseInt($('#num').val());//取出现在的值，并使用parseInt转为int类型数据
			if(oldValue==0){
				return;
			}else{
				oldValue--;//自加1
				$('#num').val(oldValue);//将增加后的值付给原控件
			}
		
		});
	});