减少文本输入字段中 parseFloat 值的小数位数

Question

我有一个我编写过的计算器，它运行得非常好！我遇到的唯一问题是 parseFloat 将小数点后 12 位的数字推送到我的文本输入字段中。我需要不超过 2 位小数，但对于我的一生，我无法弄清楚如何限制小数位。

减少输出中小数位数的最佳做法是什么？我确信这很容易，但我无法确定如何去做。

HTML

<p class="title">VET Student Loans Repayment Calculator</p>
<p class="text">Course Cost</p>
  <span class="prefix">$</span>
    <input type="text" class="input value1" placeholder="0">
    <p class="text">How much do you earn per year?</p>
&nbsp;&nbsp;&nbsp;<select onchange="calculateTotals()" name="annualincome" class="input" id="income" placeholder="Your Annual Income">
      <option value="" disabled selected hidden>Your Annual Income</option>
      <option value="0">Below $45,881</option>
      <option value="0.01">$45,881 - $52,973 (1%)</option>
      <option value="0.02">$52,974 - $56,151 (2%)</option>
      <option value="0.025">$56,152 – $59,521 (2.5%)</option>
      <option value="0.03">$59,522 - $ 63,092 (3%)</option>
      <option value="0.035">$63,093 - $66,877 (3.5%)</option>
      <option value="0.04">$66,878 - $70,890 (4%)</option>
      <option value="0.045">$70,891 - $75,144 (4.5%)</option>
      <option value="0.05">$75,145 - $79,652 (5%)</option>
      <option value="0.055">$79,653 - $84,432 (5.5%)</option>
      <option value="0.06">$84,433 - $89,498 (6%)</option>
      <option value="0.065">$89,499 - $94,868 (6.5%)</option>
      <option value="0.07">$94,869 - $100,560 (7%)</option>
      <option value="0.075">$100,561 - $106,593 (7.5%)</option>
      <option value="0.08">$106,594 - $112,989 (8%)</option>
      <option value="0.085">$112,990 - $119,769 (8.5%)</option>
      <option value="0.09">$119,770 - $126,955 (9%)</option>
      <option value="0.095">$126,956 - $134,572 (9.5%)</option>
      <option value="0.10">$134,573 and above (10%)</option>
    </select>
    <p class="text">20% Loading Fee</p>
    <span class="prefix">$</span>
    <input type="text" class="input" id="loading" disabled="disabled" placeholder="0"><br>
    <p class="text">Total VET Student Loan Amount</p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="result" placeholder="0"><br>
    <p class="text"><br><br>
    Your estimated after tax repayments are; <br><br> Per Year
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment - Yearly">
    <p class="text">
    Per Month
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="permonthresult" placeholder="After Tax Repayment - Monthly">
        <p class="text">
    Per Fortnight
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="perfortnightresult" placeholder="After Tax Repayment - Fortnightly">
        <p class="text">
    Per Week
    </p>
    <span class="prefix">$</span>
    <input type="number" class="input" disabled="disabled" id="perweekresult" placeholder="After Tax Repayment - Weekly">

JS

            $('input[type="text"]').keyup(function() {
                calculate();
            });

            $('#income').change(function() {
                calculate();
            });

            function calculate(){
                var val1 = parseFloat($('.value1').val());
                var val2 = parseFloat($('.value2').val());
                var val3 = parseFloat($('.value3').val());
                var val4 = parseFloat($('#income').val());
                var sum = val1 + (val1 / 100 * 20);
                $("input#result").val(sum);

                sum = (val1 / 100 * 20);
                $("input#loading").val(sum);

                sum = (val1 + (val1 / 100 * 20)) * val4;
                $("input#peryearresult").val(sum);

                sum = (val1 + (val1 / 100 * 20)) * val4 / 12;
                $("input#permonthresult").val(sum);

                sum = (val1 + (val1 / 100 * 20)) * val4 / 26;
                $("input#perfortnightresult").val(sum);

                sum = (val1 + (val1 / 100 * 20)) * val4 / 52;
                $("input#perweekresult").val(sum);
            }
        });```

Answer 1

toFixed() 方法使用定点表示法格式化数字。

toFixed() documentation

Answer 2

我发现使用Math.round解决了这个问题！

sum = Math.round(((val1 + (val1 / 100 * 20)) * val4 / 52) * 100) / 100;
$("input#perweekresult").val(sum);

Answer 3

您可以使用toFixed(decimalnumber)，如下代码所示

 $(function(){
        $('input[type="text"]').keyup(function() {
           calculate();
         });

         $('#income').change(function() {
            calculate();
        });

        function calculate(){
            var val1 = parseFloat($('.value1').val());
            var val2 = parseFloat($('.value2').val());
            var val3 = parseFloat($('.value3').val());
            var val4 = parseFloat($('#income').val());
            var sum = parseFloat(val1 + (val1 / 100 * 20));
            $("input#result").val(parseFloat(sum).toFixed(2));

                sum = (val1 / 100 * 20);
                $("input#loading").val(parseFloat(sum).toFixed(2));

                sum = (val1 + (val1 / 100 * 20)) * val4;
                $("input#peryearresult").val(parseFloat(sum).toFixed(2));

                sum = (val1 + (val1 / 100 * 20)) * val4 / 12;
                $("input#permonthresult").val(parseFloat(sum).toFixed(2));

                sum = (val1 + (val1 / 100 * 20)) * val4 / 26;
                $("input#perfortnightresult").val(parseFloat(sum).toFixed(2));

                sum = (val1 + (val1 / 100 * 20)) * val4 / 52;
                $("input#perweekresult").val(parseFloat(sum).toFixed(2));
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="title">VET Student Loans Repayment Calculator</p>
<p class="text">Course Cost</p>
  <span class="prefix">$</span>
    <input type="text" class="input value1" placeholder="0">
    <p class="text">How much do you earn per year?</p>
&nbsp;&nbsp;&nbsp;<select onchange="calculateTotals()" name="annualincome" class="input" id="income" placeholder="Your Annual Income">
      <option value="" disabled selected hidden>Your Annual Income</option>
      <option value="0">Below $45,881</option>
      <option value="0.01">$45,881 - $52,973 (1%)</option>
      <option value="0.02">$52,974 - $56,151 (2%)</option>
      <option value="0.025">$56,152 – $59,521 (2.5%)</option>
      <option value="0.03">$59,522 - $ 63,092 (3%)</option>
      <option value="0.035">$63,093 - $66,877 (3.5%)</option>
      <option value="0.04">$66,878 - $70,890 (4%)</option>
      <option value="0.045">$70,891 - $75,144 (4.5%)</option>
      <option value="0.05">$75,145 - $79,652 (5%)</option>
      <option value="0.055">$79,653 - $84,432 (5.5%)</option>
      <option value="0.06">$84,433 - $89,498 (6%)</option>
      <option value="0.065">$89,499 - $94,868 (6.5%)</option>
      <option value="0.07">$94,869 - $100,560 (7%)</option>
      <option value="0.075">$100,561 - $106,593 (7.5%)</option>
      <option value="0.08">$106,594 - $112,989 (8%)</option>
      <option value="0.085">$112,990 - $119,769 (8.5%)</option>
      <option value="0.09">$119,770 - $126,955 (9%)</option>
      <option value="0.095">$126,956 - $134,572 (9.5%)</option>
      <option value="0.10">$134,573 and above (10%)</option>
    </select>
    <p class="text">20% Loading Fee</p>
    <span class="prefix">$</span>
    <input type="text" class="input" id="loading" disabled="disabled" placeholder="0"><br>
    <p class="text">Total VET Student Loan Amount</p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="result" placeholder="0"><br>
    <p class="text"><br><br>
    Your estimated after tax repayments are; <br><br> Per Year
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment - Yearly">
    <p class="text">
    Per Month
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="permonthresult" placeholder="After Tax Repayment - Monthly">
        <p class="text">
    Per Fortnight
    </p>
    <span class="prefix">$</span>
    <input type="text" class="input" disabled="disabled" id="perfortnightresult" placeholder="After Tax Repayment - Fortnightly">
        <p class="text">
    Per Week
    </p>
    <span class="prefix">$</span>
    <input type="number" class="input" disabled="disabled" id="perweekresult" placeholder="After Tax Repayment - Weekly">