JavaScript基于DOM操作實現(xiàn)簡單的數(shù)學運算功能示例
本文實例講述了JavaScript基于DOM操作實現(xiàn)簡單的數(shù)學運算功能。分享給大家供大家參考,具體如下:
<!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操作-實現(xiàn)簡單的運算</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> 運算數(shù)1:<input type="text" id="opNum1" /><br /> 運算數(shù)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:這里再為大家推薦幾款計算工具供大家進一步參考借鑒:
在線一元函數(shù)(方程)求解計算工具:
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科學計算器在線使用_高級計算器在線計算:
http://tools.jb51.net/jisuanqi/jsqkexue
在線計算器_標準計算器:
http://tools.jb51.net/jisuanqi/jsq
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript替換操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
javascript動態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對觸發(fā)事件的元素進行判斷,然后執(zhí)行不同的操作,下面是具體的實現(xiàn),需要的朋友可以學習下2014-06-06原生js實現(xiàn)改變隨意改變div屬性style的名稱和值的結果
在本文將為大家介紹下如何用原生js和jQuery實現(xiàn)隨意改變div屬性,和重置,具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-09使用Sticky組件實現(xiàn)帶sticky效果的tab導航和滾動導航的方法
sticky組件,通常應用于導航條或者工具欄,當網(wǎng)頁在某一區(qū)域滾動的時候,將導航條或工具欄這類元素固定在頁面頂部或底部,方便用戶快速進行這類元素提供的操作2016-03-03elementui-樹形控件實現(xiàn)子節(jié)點右側(cè)添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果
這篇文章主要介紹了elementui-樹形控件實現(xiàn)子節(jié)點右側(cè)添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-01-01