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

  • 相关阅读:
    xposed
    Python-ElasticSearch写入、更新、删除、搜索
    Python 队列(Queue)用法
    支付安全的思考
    H5微信支付、支付宝支付
    for...of为什么不能遍历Object对象
    $.ajax 请求数据
    小程序内h5页面,完成分享
    typescript2---泛型和接口案例
    typescript 语法总结
  • 原文地址:https://www.cnblogs.com/mengwei-ziyun/p/5371325.html
Copyright © 2011-2022 走看看