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

      

    效果

  • 相关阅读:
    结队完成-连续最大子数组和
    一、数据库的基础简介
    十六、Shell之expect自动化交互程
    十五、Shell之数组
    十四、循环控制
    十三、Shell之select语句
    Linux系统产生随机数的6种方法
    十二、Shell之for循环
    十一、Shell之while&&until循环
    Shell补充之后台执行脚本程序
  • 原文地址:https://www.cnblogs.com/sun927/p/7064643.html
Copyright © 2011-2022 走看看