本文實例講述了JavaScript基于DOM操作實現簡單的數學運算功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"> <title>簡單的DOM操作-實現簡單的運算</title> <script type="text/javascript" language="javascript"> window.onload = function () { //alert("window.onload!!!"); var opNum1 = window.document.getElementById("opNum1"); var opNum2 = window.document.getElementById("opNum2"); //var op = window.document.getElementById("op"); var btnElements = window.document.getElementsByName("operater"); //.getElementsByTagName("input[type=button]"); var btnElementsLength = btnElements.length; for (var i = 0; i < btnElementsLength; i++) { //alert(i); btnElements[i].onclick = function () { //alert(opNum1.value + "_" + opNum2.value + "_" + this.value); operate(opNum1.value, opNum2.value, this.value); } } } function operate(opNum1, opNum2, op) { var result=null; switch (op) { case "+": result = parseFloat(opNum1) + parseFloat(opNum2); break; case "-": result = parseFloat(opNum1) - parseFloat(opNum2); break; case "*": result = parseFloat(opNum1) * parseFloat(opNum2); break; case "/": result = parseFloat(opNum1) / parseFloat(opNum2); break; case "%": result = parseFloat(opNum1) % parseFloat(opNum2); break; default: break; } var resultElement = window.document.getElementById("resultSpan"); resultElement.innerHTML = result; } </script> <style type="text/css"> body{ line-height:30px; font-size:20px; } input[type=button]{ width:50px; } </style></head><body> 運算數1：<input type="text" id="opNum1" /><br /> 運算數2：<input type="text" id="opNum2" /><br /> 選擇操作符： <input type="button" name="operater" value="+" /> <input type="button" name="operater" value="-" /> <input type="button" name="operater" value="*" /> <input type="button" name="operater" value="/" /> <input type="button" name="operater" value="%" /> <br /> 運算結果為：<span id="resultSpan"></span><br /></body></html>PS：這里再為大家推薦幾款計算工具供大家進一步參考借鑒：
在線一元函數（方程）求解計算工具：
http://tools.VeVB.COm/jisuanqi/equ_jisuanqi
科學計算器在線使用_高級計算器在線計算：
http://tools.VeVB.COm/jisuanqi/jsqkexue
在線計算器_標準計算器：
http://tools.VeVB.COm/jisuanqi/jsq
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript替換操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
