zoukankan      html  css  js  c++  java
  • js input输入数量控制

    <div class="w-number" >

    <a class="w-number-btn w-number-btn-minus" pro="minus" href="javascript:void(0);">-</a>

    <input class="w-number-input" pro="input" type="text" value="5">

    <a class="w-number-btn w-number-btn-plus" pro="plus" href="javascript:void(0);">+</a>

    </div>

    window.ONE_GOODS = {
    status : 1,
    period : 304080621,
    goods : {
    gid : 1851,
    gname : '平安金',
    price : 3688,
    buyable : true,
    buyUnit : 10
    },
    existingTimes : 3485
    };

    //数量输入框 window.ONE_GOODS
    var $numInput = $(".w-number-input");
    var oBuyNum = parseInt($numInput.val());
    //-
    $(".w-number-btn.w-number-btn-minus").click(function(){
    var buyNum = $numInput.val() - $numInput.val() % ONE_GOODS.goods.buyUnit - ONE_GOODS.goods.buyUnit;
    oBuyNum = buyNum >= ONE_GOODS.goods.buyUnit ? buyNum : ONE_GOODS.goods.buyUnit;
    $numInput.val(oBuyNum);
    });
    //+
    $(".w-number-btn.w-number-btn-plus").click(function(){
    var buyNum = parseInt($numInput.val()) - $numInput.val() % ONE_GOODS.goods.buyUnit + ONE_GOODS.goods.buyUnit;
    oBuyNum = buyNum <= ONE_GOODS.existingTimes ? buyNum : ONE_GOODS.existingTimes;
    $numInput.val(oBuyNum);
    });
    //输入
    $numInput.hover(function(){selectText($numInput[0],0,$numInput.val().length);},function(){});
    $(".w-number-input").change(function(){
    var buyNum = $numInput.val();
    if(/^d+$/.test(buyNum)){
    if(buyNum < ONE_GOODS.goods.buyUnit){
    oBuyNum = ONE_GOODS.goods.buyUnit;
    }else if( buyNum > ONE_GOODS.existingTimes){
    oBuyNum = ONE_GOODS.existingTimes;
    }else if(buyNum%ONE_GOODS.goods.buyUnit > 0){
    oBuyNum = buyNum > ONE_GOODS.goods.buyUnit ? buyNum - buyNum % ONE_GOODS.goods.buyUnit + ONE_GOODS.goods.buyUnit : ONE_GOODS.goods.buyUnit;
    }
    }
    $numInput.val(oBuyNum);
    });

  • 相关阅读:
    安装IDM扩展
    Go_数组&切片
    Mycat概念&安装
    IDEA自定义主题
    完全卸载Oracle11g
    创建型模式——单例模式(Singleton)
    设计模式统计
    PHP解压带密码的zip文件
    Win推荐软件
    如何设置线程池的线程数?
  • 原文地址:https://www.cnblogs.com/mengwei-ziyun/p/5371325.html
Copyright © 2011-2022 走看看