Question

我试图实现一个输入，当我按下向上和向下时，它递增/递减0.001，当我按左/右时，它递增/递减0.01。但是，当我单击左键几次时，我会得到0.060000000000000005而不是0.06。我该如何解决？

HTML

<div class="display" id="out">test</div>

<div class="form-group">
  <label for="comment">value:</label>
  <input class="form-control" type="Number" step='0.001' value="0.00" id="in"></input>
</div>

的jQuery

function getLocalDecimalSeparator() {
    var n = 1.1;
    return n.toLocaleString().substring(1,2);
}

function parseLocalFloat(num) {
    return Number(num.replace(getLocalDecimalSeparator(), '.'));
}

//var x = document.getElementById('in');
$('#in').on("change", function(){
    var x = parseLocalFloat($(this).val());
    $('#out').html(x);
});

$('#in').on("keydown", function(e){

    if(e.keyCode == 37){
        $(this).val(+$(this).val() + +0.01);
    }
    if(e.keyCode == 39){
        $(this).val(+$(this).val() - +0.01);
    }

    $(this).change();
});

Answer 1

我认为这种行为是浮点运算精度/错误（wiki link）。

你可以做的是强制执行固定数量的小数（基本上，舍入结果）。您可以使用toFixed()方法选择确切的位数，或使用toPrecision()方法选择要显示的有效位数。请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision

Answer 2

我认为问题是，java浮点计算并不总是准确且存在精度错误。

现在取决于你正在做什么样的计算。

如果你愿意的话不想看到所有这些额外的小数位：只需格式化你的结果显示时四舍五入到固定的小数位数它。

function getLocalDecimalSeparator() {
    var n = 1.1;
    return n.toLocaleString().substring(1,2);
}

function parseLocalFloat(num) {
    return Number(num.replace(getLocalDecimalSeparator(), '.'));
}

$('#in').on("change", function(){
    var x = parseLocalFloat($(this).val());

    //Round it to 3 decimal places
    $('#out').html(Math.round(x * 1000) / 1000);


});

$('#in').on("keydown", function(e){

    if(e.keyCode == 37){
        $(this).val(+$(this).val() + +0.01);
    }
    if(e.keyCode == 39){
        $(this).val(+$(this).val() - +0.01);
    }

    $(this).change();
});

如果没有可用的十进制数据类型，请使用整数（查看示例）。

function getLocalDecimalSeparator() {
    var n = 1.1;
    return n.toLocaleString().substring(1,2);
}

function parseLocalFloat(num) {
    return Number(num.replace(getLocalDecimalSeparator(), '.'));
}

$('#in').on("change", function(){

    //Display as float
    var x = parseLocalFloat($(this).val())/1000;

    $('#out').html(x);
});

$('#in').on("keydown", function(e){

    if(e.keyCode == 37){

        //Add integer
        $(this).val(+$(this).val() + +1);

    }
    if(e.keyCode == 39){

        //Add integer
        $(this).val(+$(this).val() - +1);

    }

    $(this).change();
});

Answer 3

使用

的这段代码

$('#in').on("keydown", function(e){

    if(e.keyCode == 37){
        $(this).val(+$(this).val() +0.01);
        return false;
    }
    if(e.keyCode == 39){
        $(this).val(+$(this).val() - 0.01);
        return false;
    }

    $(this).change();
});

自定义的jQuery输入

HTML

的jQuery

3 个答案: