收起我的計算器腳本中的值併爲值添加逗號分隔符

Question

我遇到問題。我的JS知識&經驗很差，所以沒有你的幫助我無法解決。我有我的簡單計算器的以下代碼，我想爲此添加一些代碼：

如果我在計算器中輸入一個數字（如10010），則返回7.508美元。我該如何做到這一點，以便在這段時間內總是有2位數字並將其舍入？在這種情況下，最好是7.51美元而不是7.508美元。如果我輸入4000，它顯示「3美元」，但它可以說「3.00美元」？ 預先感謝您！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" /> 
 
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p> 
 

 
<script type="text/javascript">function priceCalculation(a){ 
 
    if(a <= 10000){ 
 
     return 0.00099; 
 
    }else if(a >= 10001 && a <= 25000){ 
 
     return 0.00095; 
 
    }else if(a >= 25001 && a <= 50000){ 
 
     return 0.00089; 
 
    }else if(a >= 50001 && a <= 100000){ 
 
     return 0.00075; 
 
    }else{ 
 
     return 0.00075; 
 
    } 
 
} 
 

 
// number format set to en-US e.g (from 1500 to 1,500) 
 
var numFormat = new Intl.NumberFormat("en-US"); 
 

 
$('#likecount').keyup(function(e){ 
 
    // if a '.' is pressed 
 
\t if($(this).val().endsWith('.')) { 
 
    \t return; 
 
    } 
 

 
    // if input value is empty then assign '0' else the original value 
 
    var inputVal = $(this).val() === ''?'0':$(this).val(); 
 
    
 
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, '')); 
 
    var price = priceCalculation($(this).val()); 
 
    var total = inputVal * price; 
 
    var formatted = numFormat.format(inputVal) // set format to input 
 
    $(this).val(formatted); // display the formatted input back 
 
    $('#output').text(numFormat.format(total)); // display the total price 
 
}); 
 

 
</script>

Answer 1

通過添加total.toFixed(2)，可以使total爲2位小數。我已經爲你添加了它。

var total = (inputVal * price).toFixed(2);瞭解更多關於.toFixed at MDN

檢查它下面的DEMO。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" /> 
 
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p> 
 

 
<script type="text/javascript">function priceCalculation(a){ 
 
    if(a <= 10000){ 
 
     return 0.00099; 
 
    }else if(a >= 10001 && a <= 25000){ 
 
     return 0.00095; 
 
    }else if(a >= 25001 && a <= 50000){ 
 
     return 0.00089; 
 
    }else if(a >= 50001 && a <= 100000){ 
 
     return 0.00075; 
 
    }else{ 
 
     return 0.00075; 
 
    } 
 
} 
 

 
// number format set to en-US e.g (from 1500 to 1,500) 
 
var numFormat = new Intl.NumberFormat("en-US"); 
 

 
$('#likecount').keyup(function(e){ 
 
    // if a '.' is pressed 
 
\t if($(this).val().endsWith('.')) { 
 
    \t return; 
 
    } 
 

 
    // if input value is empty then assign '0' else the original value 
 
    var inputVal = $(this).val() === ''?'0':$(this).val(); 
 
    
 
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, '')); 
 
    var price = priceCalculation($(this).val()); 
 
    var total = (inputVal * price); 
 
    total = (Math.round(total * 100)/100).toFixed(2); 
 
    var formatted = numFormat.format(inputVal) // set format to input 
 
    $(this).val(formatted); // display the formatted input back 
 
    $('#output').text((total)); // display the total price 
 
}); 
 

 
</script>

Answer 2

Intl.NumberFormat接受一個選項參數，使您可以影響風格。

從你的例子，好像你可以使用：

var numFormat = new Intl.NumberFormat("en-US", { style: 'currency', currency: 'USD' }); 

注意，這也將增加貨幣符號（如在這裏，一個美元符號）。如果你真的只是想控制舍入，你可以設置minimumFractionDigits和maximumFractionDigits代替：

var numFormat = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }); 

Answer 3

重要防線：

var total = (inputVal * price).toFixed(2); 

Working Demo

試試下面的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" /> 
 
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p> 
 

 
<script type="text/javascript">function priceCalculation(a){ 
 
    if(a <= 10000){ 
 
     return 0.00099; 
 
    }else if(a >= 10001 && a <= 25000){ 
 
     return 0.00095; 
 
    }else if(a >= 25001 && a <= 50000){ 
 
     return 0.00089; 
 
    }else if(a >= 50001 && a <= 100000){ 
 
     return 0.00075; 
 
    }else{ 
 
     return 0.00075; 
 
    } 
 
} 
 

 
// number format set to en-US e.g (from 1500 to 1,500) 
 
var numFormat = new Intl.NumberFormat("en-US"); 
 

 
$('#likecount').keyup(function(e){ 
 
    // if a '.' is pressed 
 
\t if($(this).val().endsWith('.')) { 
 
    \t return; 
 
    } 
 

 
    // if input value is empty then assign '0' else the original value 
 
    var inputVal = $(this).val() === ''?'0':$(this).val(); 
 
    
 
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, '')); 
 
    var price = priceCalculation($(this).val()); 
 
    var total = (inputVal * price); 
 
    total = (Math.round(total * 100)/100).toFixed(2); 
 
    var formatted = numFormat.format(inputVal) // set format to input 
 
    $(this).val(formatted); // display the formatted input back 
 
    $('#output').text(total); // display the total price 
 
}); 
 

 
</script>