javascript - 输入四舍五入/替换为键盘上的下一个倍数

Question

我首先有两个输入，当我输入 0 - 1.53 之间的数字时，我想自动将其替换为 1.53，当我输入 1.54 时，我想将其替换为 3.06，因为 (1.53 + 1.53) = 3.06 等。我使用数学.ceil() 但我不知道如何将此值输入？

更多解释:

<p>if first input range between 0 - 1.53 result first input = 1.53, second input = 1</p>
<p>if first input range between 1.54 - 3.06 result first input = 3.06, second input = 2</p>
<p>if first input range between 3.06 - 4.59 result first input = 4.59, second input = 3</p>
    <div class="input-box col-sm-12">
        <label>in this input result supposed to round up to next multiple like 1.53 and 3.06 and 4.59...</label><br/>
        <input type="text" value="" id="product_val" autocomplete="off">
    </div>
    <div class="input-box col-sm-12">
        <label>second input</label><br/>
        <input type="number" value="" id="products_packs" autocomplete="off" disabled>
    </div>

和js:

$(document).ready(function() {
var packSize = 1.53,
    packPrice = 35;
$('#product_val').keyup(function() {
    var area2 = $(this).val().replace(',', '.');
        var area = (Math.ceil(area2 / packSize) * packSize);
    var packs = Math.ceil(area / packSize);
    setPrice(packs * packPrice); 
    setPacks(Math.ceil(area / packSize)); 
});
$('#products_packs').keyup(function() {
    var packs = $(this).val();
    setPrice(packPrice * packs); 
    setArea(packSize * packs); 
    setPacks(packs);
});
function setArea(value) {
    $("#product_val").val(value);
}
function setPacks(value) {
    $("#products_packs").val(value);
    $("#quantity_wanted").val(value);
}
function setPrice(value) {
    $("#products_price").text($("#products_price").text().replace(/[0-9\.\,]+/, parseFloat(value).toFixed(2)));
}
});

此行完成所有工作，但我需要在停止输入 var area = (Math.ceil(area2 / packSize) * packSize); 后用此行的结果替换我在第一个输入中输入的值我怎样才能做到这一点？

这是工作 fiddle https://jsfiddle.net/wzte04rj/1/

Answer 1

看看updated fiddle ，它将按您的预期工作。

说明:

问题是，你需要为你的工作做一些数学计算。我想出了这个:

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

但由于它是一个简单的算法，因此还有许多其他选项。唯一需要指出的是，上面的行将在输入 1.53 的情况下产生 3.06 ；因此，如果值已经可以被 packSize整除，我们需要在 if 语句之前取消计算(编写一个 return 表达式)。像:

var divider = inputValue / packSize;

if ( divider == ~~divder )
    return;

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

另一点是，当用户离开输入时我们会更新该值。对于用户来说，在输入时更改输入值并不是一个好的体验。但您可以将此事件更改为您想要的任何内容。

玩得开心<3