数量增减控制效果

 <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>