zoukankan      html  css  js  c++  java
  • 文本框数量加减功能

     此功能相当于购物车加减功能:

    <div class="_stepper">
      <input type="text" value="30" class="stepper_input" />
      <em class="up" id="numAdd" value="加"></em>
      <em class="down" id="numDec" value="减"></em>
    </div>


    css

    ._stepper{display:inline-block;position:relative;margin-right:10px; }
    .stepper_input{ background: #fff; border: 1px solid #ddd;150px;height:34px;color: #697082;padding-left:10px;}
    ._stepper .up,._stepper .down{position:absolute; cursor: pointer;36px;height:17px; border: 1px solid #ddd;text-indent: -99999px; background:#f8fbfe;}
    ._stepper .up{background: #fff url(../../../Content/images/_register/up.png) no-repeat; background-position:center;top:0px;right:0;}
    ._stepper .down{background: #fff url(../../../Content/images/_register/down.png) no-repeat; background-position: center; bottom:0px;right:0; }

       //加的效果
            $("#numAdd").click(function () {
                var n = $(".stepper_input").val();
                if (n < 30) {
                    var num = parseInt(n) + 1;
                    if (num == 0) { return; }
                    $(".stepper_input").val(num);
                }
    
            });
    
            //减的效果
            $("#numDec").click(function () {
                var n = $(".stepper_input").val();
                if (n > 2) {
                    var num = parseInt(n) - 1;
                    if (num == 0) { return }
                    $(".stepper_input").val(num);
                }
            });
    

      

    效果

  • 相关阅读:
    UIView+ViewController.h 点击控制器上视图,使视图push下个视图控制的封装
    Touch Demo
    layoutSubviews与drawRect
    UI NS CG CF 区别
    CALayer
    关于CALayer的困惑
    pypy 对接阿里短信平台
    mysql去掉默认值
    GCC升级
    jemalloc 测试
  • 原文地址:https://www.cnblogs.com/sun927/p/7064643.html
Copyright © 2011-2022 走看看