之前在寫商品詳情頁時，需要寫一個數字加減框，如下圖

　

　　因為自己嫌麻煩，就去看其他網站是怎么寫的，想直接拿來用，后來看來看去覺得寫得很麻煩，

　　于是決定自己寫，附上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();
     });

總結

以上是生活随笔為你收集整理的购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。