购物车数字加减按钮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:;

                padding:;

                border:;

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

                border-right:;

            }

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();

     });