Question

我有一个小的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）替换图像的输入类型按钮（我已经尝试了明显的代码和＆gt;输入类型=图像＆gt;，基本上这些确实有效，但它们不是显示实际结果，而是显示结果然后再次使用空白表单重新加载页面...

任何有关这方面的帮助都会有很大的帮助

提前致谢

Answer 1

部分问题

您可以通过

将JavaScript转换为特定的精度

Link :Number rounding in JavaScript

var original = 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

Answer 2

.toFixed() method可让你四舍五入到 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>

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

Answer 3

要交换图像按钮，请更换按钮＆lt; input＆gt;使用此代码：

<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 ;

javascript计算器到小数位和图像作为按钮

3 个答案: