点击“+“,“-“改变数字大小的js方法

在点击“+”,“-”号时能改变中间数字的大小,实现代码如下:
在dom层

<div class="control-num">
 <span class="control-num-icon jian"></span>
  <input id="Number" readonly="true" type="text" value="500" />          <span class="control-num-icon jia"></span>
  </div>

css代码:

  .control-num{
      display:inline-block;
      span{
          font-size: 12px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #FFFFFF;
        }
      .control-num-icon{
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
      }
      .jian{
        background:url("../img/jian-num-icon.png") no-repeat;
        background-size: 100% 100%;
      }
      .jia{
        background:url("../img/jia-num-icon.png") no-repeat;
        background-size: 100% 100%;
      }
    #Number{
   display:inline-block;
   width: 21px;
   text-align:center;
  }
  // 需要先去除input框的默认样式
   input {
    background: none;
    outline: none;
    border: none;
    color: transparent;
    text-shadow: 0 0 0 #fff;
  }
    }

js代码:

 $(document).ready(function () {
// 增减数字
         var n = parseInt($("#Number").val());
         //等于1的时候,设置减号不可点击
         if (n == 1) {
             $(".jian").css({ cursor: "not-allowed" });
         }
         //点击加号,改变文本框中的值,并设置减号为可使用。
         $(".jia").click(function () {
             n += 1;
             $(".jian").css({ cursor: "pointer"});//变为可点击
             $("#Number").val(n);
         });
         //点击减号,改变文本框中的值
         //如果文本框的值为1,则设置减号为不可使用。
         $(".jian").click(function () {
             if (n == 1) {
                 $(".jian").css({ cursor: "not-allowed"});//变为不可点击
             }
             if (n > 1) {
                 n -= 1;
                 $("#Number").val(n);
             }
         });
         //光标经过时,如果文本框的值为1,则减号不可点击。
         $(".jian").hover(function () {
             if (n == 1) {
                 $(".jian").css({ cursor: "not-allowed" });
             }
         })
        })
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值