Javascript Sum函数：如何在输出中获得小数？

时间：2017-01-27 21:54:08

标签： javascript sum decimal

我有一个计算器工具，我用于涉及报价的自定义项目。我已经获得了在输入字段中添加数字并将它们总结得很好的基本功能。

由于这是一个报价工具而且并非所有正在添加的数字都是完整的，我需要输出显示两位小数。它目前只显示一个两位数的数字，而这个数字实际上是向下舍入的。我确信这很容易，但我无法理解。

Here's the Plunker（及相关代码）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style type="text/css">

form {
display: inline-block;
}

</style>

<script type="text/javascript">
window.sum= () => 
 document.getElementById('result').value=
   Array.from(
     document.querySelectorAll('#majors_01,#majors_02,#majors_03,#majors_04,#majors_05,#majors_06,#majors_07')
   ).map(e=>parseFloat(e.value).toFixed(2)||0.00)
   .reduce((a,b)=>a+b,0)
</script>

</head>
<body>

<form name="majors_01_jerseys" onsubmit="CheckForm()">
<select id="majors_01_jerseys" onchange="document.majors_01_jerseys.majors_01.value=this.value;">
<option value="" data-src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg">Select a Jersey Model</option>
<option value="30.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1751B/large-4P.jpg">Teamwork 1751B</option>
<option value="21.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1755B/large-1.jpg">Teamwork 1755B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1757B/large-15.jpg">Teamwork 1757B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/18/1825B/large-1.jpg">Teamwork 1825B</option>
<option value="29.90" data-src="http://www.majesticathletic.com/store/productimages/details/10754_columbia_blue_l_z.jpg">Majestic Cool Base 684Y</option>
<option value="32.54" data-src="http://www.uesports.com/imgrep/12107/image-440-0.jpg">UE B0173 (fully braided)</option>
</select>
$<input type="text" id="majors_01" onkeyup="sum()" name="majors_01"/>

<script type="text/javascript">
$("#majors_01_jerseys").on('change', function(){
    $("#swap").attr("src", $(this).find(":selected").attr("data-src"));
});
</script>

</form>

<form name="majors_02_graphics" onsubmit="CheckForm()">
<select onchange="document.majors_02_graphics.majors_02.value=this.value">
<option value="">Select Front Graphics Options</option>
<option value="2.75" onkeyup="sum();">Left Chest Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Left Chest Silkscreen (three-color) - $4.75</option>
<option value="2.75" onkeyup="sum();">Wordmark Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Wordmark Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Wordmark Silkscreen (three-color) - $4.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Left Chest Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Left Chest Heat Press (three-color) - $11.25</option>
<option value="3.75" onkeyup="sum();">Wordmark Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Wordmark Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Wordmark Heat Press (three-color) - $11.25</option>
</select>

$<input type="text" id="majors_02" onkeyup="sum()" name="majors_02"/>
</form>

<form name="majors_03_numbers_front" onsubmit="CheckForm()">
<select onchange="document.majors_03_numbers_front.majors_03.value=this.value">
<option value="">Front Numbers?</option>
<option value="0" onkeyup="sum();">No - $0</option>
<option value="2.25" onkeyup="sum();">Yes (one-color) - $2.25</option>
<option value="7.00" onkeyup="sum();">Yes (two-color) - $7.00</option>
</select>
$<input type="text" id="majors_03" onkeyup="sum()" name="majors_03"/>
</form>

<form name="majors_04_numbers_back" onsubmit="CheckForm()">
<select onchange="document.majors_04_numbers_back.majors_04.value=this.value">
<option value="">Select Back Number Options</option>
<option value="8" onkeyup="sum();">One-color - $8</option>
<option value="12" onkeyup="sum();">Two-color - $12</option>
</select>
$<input type="text" id="majors_04" onkeyup="sum()" name="majors_04"/>
</form>

<form name="majors_05_player_name" onsubmit="CheckForm()">
<select onchange="document.majors_05_player_name.majors_05.value=this.value">
<option value="">Select Player Name Options</option>
<option value="0" onkeyup="sum();">None - $0</option>
<option value="2.25" onkeyup="sum();">Player Last Name - $2.25</option>
</select>
$<input type="text" id="majors_05" onkeyup="sum()" name="majors_05"/>
</form>

<form name="majors_06_patch" onsubmit="CheckForm()">
<select onchange="document.majors_06_patch.majors_06.value=this.value">
<option value="">Little League Patch?</option>
<option value="1" onkeyup="sum();">Yes - $1</option>
<option value="0" onkeyup="sum();">No - $0</option>
</select>
$<input type="text" id="majors_06" onkeyup="sum()" name="majors_06"/>
</form>

<form name="majors_07_youth_or_adult" onsubmit="CheckForm()">
<select onchange="document.majors_07_youth_or_adult.majors_07.value=this.value">
<option value="">Youth or Adult?</option>
<option value="0" onkeyup="sum();">Adult (no change)</option>
<option value="-4" onkeyup="sum();">Youth (subtract $4)</option>
</select>
$<input type="text" id="majors_07" onkeyup="sum()" name="majors_07"/>
</form>

Total: $<input type="text" id="result" disabled> Per garment (estimated).

<div id="large-jersey-box-majors" class="hide_come_back_and_rename">
<center><img id="swap" src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg" height=300></center>
</div>

</body>
</html>

3 个答案:

答案 0 :(得分：0)

您的Plunker代码的111行：

).map(e=>parseInt(e.value)||0)

替换为：

).map(e=>parseFloat(e.value).toFixed(2)||0.00)

答案 1 :(得分：0)

您编辑的Plunk的第21行：

).map(e=>parseFloat(e.value).toFixed(2)||0.00)

替换为：

).map(e=>parseFloat(e.value)||0.00)

第22行

.reduce((a,b)=>a+b,0)

替换为：

.reduce((a,b)=>a+b,0).toFixed(2)

答案 2 :(得分：0)

@Diego Maia想出来了。这个问题已得到解答。

如他的响应中所示，替换/覆盖行是使输出显示两位小数并使计算正常工作所需的。

Here's the updated Plunker 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style type="text/css">

form {
display: inline-block;
}

</style>

<script type="text/javascript">
window.sum= () => 
 document.getElementById('result').value=
   Array.from(
     document.querySelectorAll('#majors_01,#majors_02,#majors_03,#majors_04,#majors_05,#majors_06,#majors_07')
   ).map(e=>parseFloat(e.value)||0.00)
   .reduce((a,b)=>a+b,0).toFixed(2)
</script>

</head>
<body>

<form name="majors_01_jerseys" onsubmit="CheckForm()">
<select id="majors_01_jerseys" onchange="document.majors_01_jerseys.majors_01.value=this.value;">
<option value="" data-src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg">Select a Jersey Model</option>
<option value="30.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1751B/large-4P.jpg">Teamwork 1751B</option>
<option value="21.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1755B/large-1.jpg">Teamwork 1755B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1757B/large-15.jpg">Teamwork 1757B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/18/1825B/large-1.jpg">Teamwork 1825B</option>
<option value="29.90" data-src="http://www.majesticathletic.com/store/productimages/details/10754_columbia_blue_l_z.jpg">Majestic Cool Base 684Y</option>
<option value="32.54" data-src="http://www.uesports.com/imgrep/12107/image-440-0.jpg">UE B0173 (fully braided)</option>
</select>
$<input type="text" id="majors_01" onkeyup="sum()" name="majors_01"/>

<script type="text/javascript">
$("#majors_01_jerseys").on('change', function(){
    $("#swap").attr("src", $(this).find(":selected").attr("data-src"));
});
</script>

</form>

<form name="majors_02_graphics" onsubmit="CheckForm()">
<select onchange="document.majors_02_graphics.majors_02.value=this.value">
<option value="">Select Front Graphics Options</option>
<option value="2.75" onkeyup="sum();">Left Chest Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Left Chest Silkscreen (three-color) - $4.75</option>
<option value="2.75" onkeyup="sum();">Wordmark Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Wordmark Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Wordmark Silkscreen (three-color) - $4.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Left Chest Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Left Chest Heat Press (three-color) - $11.25</option>
<option value="3.75" onkeyup="sum();">Wordmark Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Wordmark Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Wordmark Heat Press (three-color) - $11.25</option>
</select>

$<input type="text" id="majors_02" onkeyup="sum()" name="majors_02"/>
</form>

<form name="majors_03_numbers_front" onsubmit="CheckForm()">
<select onchange="document.majors_03_numbers_front.majors_03.value=this.value">
<option value="">Front Numbers?</option>
<option value="0" onkeyup="sum();">No - $0</option>
<option value="2.25" onkeyup="sum();">Yes (one-color) - $2.25</option>
<option value="7.00" onkeyup="sum();">Yes (two-color) - $7.00</option>
</select>
$<input type="text" id="majors_03" onkeyup="sum()" name="majors_03"/>
</form>

<form name="majors_04_numbers_back" onsubmit="CheckForm()">
<select onchange="document.majors_04_numbers_back.majors_04.value=this.value">
<option value="">Select Back Number Options</option>
<option value="8" onkeyup="sum();">One-color - $8</option>
<option value="12" onkeyup="sum();">Two-color - $12</option>
</select>
$<input type="text" id="majors_04" onkeyup="sum()" name="majors_04"/>
</form>

<form name="majors_05_player_name" onsubmit="CheckForm()">
<select onchange="document.majors_05_player_name.majors_05.value=this.value">
<option value="">Select Player Name Options</option>
<option value="0" onkeyup="sum();">None - $0</option>
<option value="2.25" onkeyup="sum();">Player Last Name - $2.25</option>
</select>
$<input type="text" id="majors_05" onkeyup="sum()" name="majors_05"/>
</form>

<form name="majors_06_patch" onsubmit="CheckForm()">
<select onchange="document.majors_06_patch.majors_06.value=this.value">
<option value="">Little League Patch?</option>
<option value="1" onkeyup="sum();">Yes - $1</option>
<option value="0" onkeyup="sum();">No - $0</option>
</select>
$<input type="text" id="majors_06" onkeyup="sum()" name="majors_06"/>
</form>

<form name="majors_07_youth_or_adult" onsubmit="CheckForm()">
<select onchange="document.majors_07_youth_or_adult.majors_07.value=this.value">
<option value="">Youth or Adult?</option>
<option value="0" onkeyup="sum();">Adult (no change)</option>
<option value="-4" onkeyup="sum();">Youth (subtract $4)</option>
</select>
$<input type="text" id="majors_07" onkeyup="sum()" name="majors_07"/>
</form>

Total: $<input type="text" id="result" disabled> Per garment (estimated).

<div id="large-jersey-box-majors" class="hide_come_back_and_rename">
<center><img id="swap" src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg" height=300></center>
</div>

</body>
</html>

真棒！谢谢！

相关问题
最新问题