javascript計算器到小數位和圖像作為按鈕

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）替換圖像的輸入類型按鈕（我已經嘗試了明顯的代碼和>輸入類型=圖像>，基本上這些實際上工作但不是顯示實際結果，它們在瞬間顯示結果然后重新加載頁面再次使用空白表格...

任何有關這方面的幫助都會有很大的幫助

提前致謝

Answer 1

對於你的一部分問題

你可以將javascript轉換為特定的精度

鏈接：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()方法允許您舍入到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

要交換圖像按鈕，請使用以下代碼替換<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 ;