0

我创建了此表单以使用户能够获得报价：

    <form name="autoSumForm">
<br><br>
Width: <input class="right" type="text" name="firstBox" value="" onBlur="stopCalc();"><br>
Height: <input class="right" type="text" name="secondBox" value="" onBlur="stopCalc();"><br>
Type: <select class="right" name="thirdBox" onfocus="startCalc();" onblur="stopCalc();">
        <option selected="selected">-</option>
        <option value="7.80">Forex bianco 3 mm</option>
        <option value="8.30">Forex bianco 5 mm</option>
        <option value="9.90">Forex bianco 10 mm</option>
        <option value="5.70">Forex piuma 10 mm</option>
    </select><br>
Total cost: <input class="right" type="text" name="fourBox">
</form>

我写了一个小js来计算总成本：

function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value;
  three = document.autoSumForm.thirdBox.value;
  document.autoSumForm.fourBox.value = (one * 1) * (two * 1) * (0.0001) * (three * 1);
}
function stopCalc(){
  clearInterval(interval);
}
function roundNumber(number, decimals){
    var newnumber = new Number(fourBox).toFixed(parseInt(decimals));
    document.autoSumForm.fourbox.value =  parseFloat(newnumber);
}

现在的问题是：每次填写表格时，结果都是一个逗号后有很多数字的数字，我尝试了很多东西，但没有一个做得好......请帮忙！谢谢！！！

PS 我知道这种类型的工作在服务器端更好，但它是一个简单的站点，每个订单都由一个人处理。

4

1 回答 1

0

好的，我不能 100% 确定您要计算的内容，但这里有一些我认为您可能正在尝试实现的更改，如果不是，那么它至少可以让您朝着正确的方向前进。顺便说一句，最好使用“id”而不是“name”来标识元素，因为“id”必须是唯一的。

HTML

<form name="autoSumForm">
    <br>
    <br>Width:
    <input class="right" type="text" name="firstBox" value="">
    <br>Height:
    <input class="right" type="text" name="secondBox" value="">
    <br>Type:
    <select class="right" name="thirdBox">
        <option selected="selected">-</option>
        <option value="7.80">Forex bianco 3 mm</option>
        <option value="8.30">Forex bianco 5 mm</option>
        <option value="9.90">Forex bianco 10 mm</option>
        <option value="5.70">Forex piuma 10 mm</option>
    </select>
    <br>Total cost:
    <input class="right" type="text" name="fourBox" value="0.00">
</form>

Javascript

var firstBox = document.querySelector("[name='firstBox']");
var secondBox = document.querySelector("[name='secondBox']");
var thirdBox = document.querySelector("[name='thirdBox']");
var fourBox = document.querySelector("[name='fourBox']");

function update() {
    fourBox.value = ((parseFloat(firstBox.value) * parseFloat(secondBox.value) * 0.0001 * parseFloat(thirdBox.value)) || 0).toFixed(2);
}

firstBox.addEventListener("keyup", update, false);
secondBox.addEventListener("keyup", update, false);
thirdBox.addEventListener("change", update, false);

在jsfiddle 上

写关于parseFloat与一元加运算符的评论

一元加号运算符在某些情况下可能更快（何时？），但在 2 个最流行的浏览器（Chrome 和 firefox）上，jsperf显示 parseFloat 更快

我认为 parseFloat 更清楚地表明了意图，即在前面加上“+”，较短的代码并不总是更好的代码

两种方法在转换字符串的时候也有区别，考虑这个jsfiddle

于 2013-05-02T19:08:43.050 回答