购物车数字加减按钮HTML+CSS+JS

Bing 2月前 50



HTML+CSS+JS代码如下



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

        }


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

//数字加减框
     $("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();
     });


最新回复 (0)
返回