Javascript 在将数字相加时删除小数

Question

我有一个将 4 个数字相加的脚本，但 JS 不考虑原始的小数位。

//初始输入表单

<form class="weight_form" data-ajax="false" method="post">
<input type="text" class="input_save" placeholder="save as.."/>
<input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()"/>
<input type="submit" id="sub_save" value="save"/>

//显示结果的部分

<div id="bottom_section">
    <input type="text" id="total"  value=""/>
    <input type="text" id="cross"  value=""/>
    <input type="text" id="ls"  value=""/>
    <input type="text" id="bite"  value=""/>    
</div>

//动态执行操作的 JS 脚本

<script>
function myFunction() {
var lf = document.getElementById("lf");
var rf = document.getElementById("rf");
var lr = document.getElementById("lr");
var rr = document.getElementById("rr");

var lf = parseInt(lf.value);
var rf = parseInt(rf.value);
var lr = parseInt(lr.value);
var rr = parseInt(rr.value);

  var lf_1 = lf*1;
  var rf_1 = rf*1;
  var lr_1 = lr*1;
  var rr_1 = rr*1;

  var total = lf_1 + rf_1 + lr_1 + rr_1;
  var cross = rf_1 + lr_1 / total;
  var ls = lf_1 + lr_1 / total;
  var bite = lr_1 - rr_1;


$('#total').val(total);
$('#cross').val(Math.round(cross));
$('#ls').val(Math.round(ls));
$('#bite').val(bite);
};
</script>

如果我在“weight_form”(lf、rf、lr、rr)中为每个输入输入 20.5，则总数为 80，而不是 82。为什么它似乎总是向下舍入该值？

Answer 1

要处理表单中的 float ，请使用parseFloat而不是parseInt ，在解析 input 元素中的值时。

由于您使用的是 jQuery，因此您可以通过选择字段并在一行中解析其值来简化 myFunction:

var lf = parseFloat($("#lf").val());
var rf = parseFloat($("#rf").val());
var lr = parseFloat($("#lr").val());
var rr = parseFloat($("#rr").val());

示例:

function myFunction() {
  var lf = parseFloat($("#lf").val());
  var rf = parseFloat($("#rf").val());
  var lr = parseFloat($("#lr").val());
  var rr = parseFloat($("#rr").val());

  var lf_1 = lf * 1;
  var rf_1 = rf * 1;
  var lr_1 = lr * 1;
  var rr_1 = rr * 1;

  var total = lf_1 + rf_1 + lr_1 + rr_1;
  var cross = rf_1 + lr_1 / total;
  var ls = lf_1 + lr_1 / total;
  var bite = lr_1 - rr_1;

  $('#total').val(total);
  $('#cross').val(Math.round(cross));
  $('#ls').val(Math.round(ls));
  $('#bite').val(bite);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form class="weight_form" data-ajax="false" method="post">
  <input type="text" class="input_save" placeholder="save as.." />
  <input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()" />
  <input type="submit" id="sub_save" value="save" />
  <div id="bottom_section">
    <input type="text" id="total" value="" />
    <input type="text" id="cross" value="" />
    <input type="text" id="ls" value="" />
    <input type="text" id="bite" value="" />
  </div>
</form>