0

我有一个小的 javascript 表单

<div id="calculator-text"><h2>Tape calculator - based on cable size 1 mm to 28 mm, with 15% overlap</h2></div>

<form name="form1" method="post" action="">

<div id="calcformlabel"><label for="val2">Enter your cable size</label> (in mm)</div>
<div id="calcformtext1"><input type="text" name="val2" id="val2"></div>

<div id="calcformbutton"><input type="button" name="calculate" id="calculate" value="Calculate"></div>

<div id="calcformresult">The tape size you require is:- <span id="result1" class="maintext1"></span> (mm)</div>


</form>
<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
    // get the input values
    var val2 = parseInt(document.getElementById('val2').value);

    // get the elements to hold the results
    var result1 = document.getElementById('result1');

    // create an empty array to hold error messages
    var msg = [];
    // check each input value, and add an error message
    // to the array if it's not a number
    if (isNaN(val2)) {
        msg.push('<span class="maintext1">Enter your cable size</span>');
    }
    // if the array contains any values, display the error message(s)
    // as a comma-separated string in the first <span> element
    if (msg.length > 0) {
        result1.innerHTML = msg.join(', ');
    } else {
        // otherwise display the results in the <span> elements
        result1.innerHTML = val2 * 3.142 * 1.15;
    }
};
</script>

基本上这是一个简单的计算

a) 我怎样才能让它输出到小数点后 2 位（显然向上或向下取整取决于 -.5 = 向下取整和 +.5 = 向上取整）

b）替换图像的输入类型按钮（我已经尝试了明显的代码和>输入类型=图像>，基本上这些确实有效，但不是显示实际结果，而是在一瞬间显示结果然后重新加载页面再次使用空白表格...

对此的任何帮助将不胜感激

提前致谢

4

3 回答 3

1

该.toFixed()方法允许您四舍五入到n位小数，因此：

result1.innerHTML = (val2 * 3.142 * 1.15).toFixed(2);

我认为您在使用图像时遇到的问题是将图像<input type="image">定义为提交按钮。也许只是包含一个带有<img>标签的标准图像，而不是<input type="image">. 如果你给它一个id='calculate'它应该仍然可以与你现有的 JS 一起工作。

或者您可以使用包含 img 元素的按钮元素，以便您可以指定类型（因为不是提交）：

<button type="button" id="calculate"><img src="yourimage"></button>

（我不确定您是否需要此功能的表单，因为您似乎不想将任何内容提交回服务器。）

于 2012-06-04T07:01:15.657 回答
1

对于您的部分问题

您可以通过以下方式将 javascript 舍入到特定精度

链接：JavaScript中的数字舍入

var 原始=28.453

1) //round "original" to two decimals
var result=Math.round(original*100)/100  //returns 28.45



2) // round "original" to 1 decimal
var result=Math.round(original*10)/10  //returns 28.5



3) //round 8.111111 to 3 decimals
var result=Math.round(8.111111*1000)/1000  //returns 8.111
于 2012-06-04T06:56:20.553 回答
0

要将按钮交换为图像，请将按钮 <input> 替换为以下代码：

<img src="http://www.raiseakitten.com/wp-content/uploads/2012/03/kitten.jpg" name="calculate" id="calculate" value="Calculate" onclick="document.forms['form1'].submit();" />

它为您的表单添加图像和提交功能。

要四舍五入到小数点后两位，请使用此函数：

function twoDP(x){
     return Math.round(x*100)/100
}

像这样使用它：

twoDP(100/3)   //returns 33.33

使用 Math.PI 也可能与您相关

var result = val2 * Math.PI * 1.15 ;
于 2012-06-04T07:03:07.157 回答