parseFloat没有给出准确的值

Question

我正在研究一个需要“提示框”计算系统的项目。正如你在代码片段中看到的那样，它不能像我期望的那样工作。我怎么解决这个问题？

$("select[name='tip']").on('change',function(){ 
 
    var thiz = $(this); 
 
    var content_credit = parseFloat($("#f_content_credit").text()); 
 
    var total_balance = parseFloat($("#f_total_balance").text()); 
 
    var tip = parseFloat(thiz.val()); 
 

 
    console.log(total_balance+"-"+content_credit+"-"+tip); 
 
    
 
    $("#f_after_confirm").text(total_balance-content_credit-tip); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <tbody> 
 
     <tr> 
 
      <td> <strong>Total Balance</strong> </td> 
 
      <td id='f_total_balance'> 45.67 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>Credit</strong> </td> 
 
      <td id='f_content_credit'> 10.20 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>TIP BOX</strong></td> 
 
      <td> 
 
       <select name="tip" class='form-control'> 
 
        <option value="0" selected>0 Kredi</option> 
 
        <option value="0.10">0.1 credit</option> 
 
        <option value="0.20">0.2 credit | not working</option> 
 
        <option value="0.30">0.3 credit</option> 
 
        <option value="0.80">0.8 credit</option> 
 
        <option value="1.20">1.2 credit | not working</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td> 
 
      <td id='f_after_confirm'> 35.47 </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

尝试这样，使用toFixed()小数点。

$("select[name='tip']").on('change',function(){ 
 
    var thiz = $(this); 
 
    var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2); 
 
    var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2); 
 
    var tip = parseFloat(thiz.val()).toFixed(2); 
 

 
    console.log(total_balance+"-"+content_credit+"-"+tip); 
 
    
 
    $("#f_after_confirm").text(parseFloat(total_balance-content_credit-tip).toFixed(2)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <tbody> 
 
     <tr> 
 
      <td> <strong>Total Balance</strong> </td> 
 
      <td id='f_total_balance'> 45.67 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>Credit</strong> </td> 
 
      <td id='f_content_credit'> 10.20 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>TIP BOX</strong></td> 
 
      <td> 
 
       <select name="tip" class='form-control'> 
 
        <option value="0" selected>0 Kredi</option> 
 
        <option value="0.10">0.1 credit</option> 
 
        <option value="0.20">0.2 credit | not working</option> 
 
        <option value="0.30">0.3 credit</option> 
 
        <option value="0.80">0.8 credit</option> 
 
        <option value="1.20">1.2 credit | not working</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td> 
 
      <td id='f_after_confirm'> 35.47 </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

问题是由于浮点计算不一致。您可以在评论here中提到的链接@Alexis上阅读更多内容。

要解决您的实际问题，您可以将最终求和值调用toFixed()以将其格式化为所需的小数位数。试试这个：

$("select[name='tip']").on('change', function() { 
 
    var thiz = $(this); 
 
    var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2); 
 
    var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2); 
 
    var tip = parseFloat(thiz.val()).toFixed(2); 
 
    var final = (total_balance - content_credit - tip).toFixed(2); 
 

 
    console.log(final); 
 
    $("#f_after_confirm").text(final); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <tbody> 
 
    <tr> 
 
     <td> <strong>Total Balance</strong> 
 
     </td> 
 
     <td id='f_total_balance'>45.67</td> 
 
    </tr> 
 
    <tr> 
 
     <td> <strong>Credit</strong> 
 
     </td> 
 
     <td id='f_content_credit'>10.20</td> 
 
    </tr> 
 
    <tr> 
 
     <td> <strong>TIP BOX</strong> 
 
     </td> 
 
     <td> 
 
     <select name="tip" class='form-control'> 
 
      <option value="0" selected>0 Kredi</option> 
 
      <option value="0.10">0.1 credit</option> 
 
      <option value="0.20">0.2 credit | works now</option> 
 
      <option value="0.30">0.3 credit</option> 
 
      <option value="0.80">0.8 credit</option> 
 
      <option value="1.20">1.2 credit | works now</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> <strong>After Confirm Calculation</strong> 
 
     <br><small>Total Balance - Credit - Tip</small> 
 
     </td> 
 
     <td id='f_after_confirm'>35.47</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

与Math.round(100 * tot)/100;它的使用将会固定.12数字

$("select[name='tip']").on('change',function(){ 
 
    var thiz = $(this); 
 
    var content_credit = parseFloat($("#f_content_credit").text()); 
 
    var total_balance = parseFloat($("#f_total_balance").text()); 
 
    var tip = parseFloat(thiz.val()); 
 
    var tot = total_balance-content_credit-tip; 
 
var cal = Math.round(100 * tot)/100; 
 
    console.log(cal); 
 
    
 
    $("#f_after_confirm").text(cal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <tbody> 
 
     <tr> 
 
      <td> <strong>Total Balance</strong> </td> 
 
      <td id='f_total_balance'> 45.67 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>Credit</strong> </td> 
 
      <td id='f_content_credit'> 10.20 </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>TIP BOX</strong></td> 
 
      <td> 
 
       <select name="tip" class='form-control'> 
 
        <option value="0" selected>0 Kredi</option> 
 
        <option value="0.10">0.1 credit</option> 
 
        <option value="0.20">0.2 credit | not working</option> 
 
        <option value="0.30">0.3 credit</option> 
 
        <option value="0.80">0.8 credit</option> 
 
        <option value="1.20">1.2 credit | not working</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td> 
 
      <td id='f_after_confirm'> 35.47 </td> 
 
     </tr> 
 
    </tbody> 
 
</table>