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