![](https://i-blog.csdnimg.cn/blog_migrate/7c1ab676d9dea5a2eaf2b90fceb79f39.png)
<div class="numiptbox">
<a class="lbtn" id="lbtn">-</a>
<input class="numipt" id="numipt" type="number" value="1" min="1">
<a class="rbtn" id="rbtn">+</a>
</div>
/*数量选择框*/
.numiptbox{display: flex;flex-direction: row;}
.numiptbox .lbtn{color:#000000;border:1px solid #cccccc;
padding:0 6px 0px 6px;height:20px;line-height:20px;background:#ededed;}
.numiptbox .rbtn{color:#000000;border:1px solid #cccccc;
padding:0 4px 0px 4px;height:20px;line-height:20px;margin-left:-18px;background:#ededed;}
.numiptbox .numipt{color:#000000;border:1px solid #cccccc;width:60px;border-left:0;
text-align: center;height:20px;line-height:20px;}
<script>
$(function () {
//鼠标控制数量变化
$("#rbtn").click(function () {
var num=$("#numipt").val();
num++;
$("#numipt").val(num);
});
$("#lbtn").click(function () {
var num=$("#numipt").val();
if(num>1){
num--;
}
$("#numipt").val(num);
})
//时刻监听input内数值变化,改变总价
$("#numipt").bind("input propertychange", function() {
var num=$(this).val();
});
</script>