购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

　　

　　之前在写商品详情页时，需要写一个数字加减框，如下图

 　

　　因为自己嫌麻烦，就去看其他网站是怎么写的，想直接拿来用，后来看来看去觉得写得很麻烦，

　　于是决定自己写，附上HTML+CSS+JS代码，一条龙一站式贴心服务2333

 

HTML

　　　　<ul class="btn-numbox">
            <li><span class="number">数量</span></li>
            <li>
                <ul class="count">
                    <li><span id="num-jian" class="num-jian">-</span></li>
                    <li><input type="text" class="input-num" id="input-num" value="0" /></li>
                    <li><span id="num-jia" class="num-jia">+</span></li>
                </ul>
            </li>
            <li><span class="kucun">（库存:54）</span></li>
　　　  </ul>

 

CSS

　　　　　　* {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0
            }
            
            ul,
            li {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            a:hover {
                cursor: pointer;
                text-decoration: none;
            }
            
            a:link {
                text-decoration: none;
            }
            
            img {
                vertical-align: middle;
            }
            
            .btn-numbox {
                overflow: hidden;
                margin-top: 20px;
            }
            
            .btn-numbox li {
                float: left;
            }
            
            .btn-numbox li .number,
            .kucun {
                display: inline-block;
                font-size: 12px;
                color: #808080;
                vertical-align: sub;
            }
            
            .btn-numbox .count {
                overflow: hidden;
                margin: 0 16px 0 -20px;
            }
            
            .btn-numbox .count .num-jian,
            .input-num,
            .num-jia {
                display: inline-block;
                width: 28px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                font-size: 18px;
                color: #999;
                cursor: pointer;
                border: 1px solid #e6e6e6;
            }
            .btn-numbox .count .input-num {
                width: 58px;
                height: 26px;
                color: #333;
                border-left: 0;
                border-right: 0;
            }

 

JS

　　　　 var num_jia = document.getElementById("num-jia");
        var num_jian = document.getElementById("num-jian");
        var input_num = document.getElementById("input-num");

        num_jia.onclick = function() {

            input_num.value = parseInt(input_num.value) + 1;
        }

        num_jian.onclick = function() {

            if(input_num.value <= 0) {
                input_num.value = 0;
            } else {

                input_num.value = parseInt(input_num.value) - 1;
            }

        }

 

嫌复制代码麻烦的小伙伴也可以到我的github下载：https://github.com/tujingyu/car-number-box

 

注：如果你在跟后台同事对接口的时候，遇到点击加减按钮，值无法传到后台的情况，可以改成下面这种方式

//数字加减框
     $("body").on("click",".num-jian",function (m) {
           var obj = $(this).closest("ul").find(".input-num");
           if (obj.val() <= 0) {
                obj.val(0);
           } else {
                obj.val(parseInt(obj.val()) - 1);
           }
           obj.change();
     });
     $("body").on("click",".num-jia",function (m) {
           var obj = $(this).closest("ul").find(".input-num");
           obj.val(parseInt(obj.val()) + 1);
           obj.change();
     });

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点