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

  • 相关阅读:
    java的概述 常量 变量
    css 基础2
    css 盒子模型1
    css 基础1
    HTML 基础 3
    HTML基础2
    servletContext百科
    hibernate 一对多双向关联 详解
    hibernate generator class="" id详解
    Hibernate缓存原理与策略
  • 原文地址:https://www.cnblogs.com/mengwei-ziyun/p/5371325.html
Copyright © 2011-2022 走看看