js制作簡易計(jì)算器
本文實(shí)例為大家分享了js制作簡易計(jì)算器的具體代碼,供大家參考,具體內(nèi)容如下

要制作一個(gè)如圖所示的簡易計(jì)算器,首先要建立一個(gè)表單,制作出如圖所示的樣子。
<table border="1" cellspacing="0" >
<tr><th colspan="2">購物簡易計(jì)算器</th></tr>
<tr>
<td>第一個(gè)數(shù)</td>
<td><input type="text" id="inputId1" /></td>
</tr>
<tr>
<td>第二個(gè)數(shù)</td>
<td><input type="text" id="inputId2" /></td>
</tr>
<tr>
<td><button type="button" onclick="cal('+')" >+</button></td>
<td><button type="button" onclick="cal('-')" >-</button>
<button type="button" onclick="cal('*')" >*</button>
<button type="button" onclick="cal('/')" >/</button></td>
</tr>
<tr>
<td>計(jì)算結(jié)果</td>
<td><input type="text" id="resultId"/></td>
</tr>
</table>
onclick使用cal()方法,其實(shí)一開始我是使用add,sub,mul,div四種方法的,后來發(fā)現(xiàn)這四個(gè)方法除了算術(shù)運(yùn)算符不一樣,其他的地方都一樣,所以選擇使用一個(gè)方法,點(diǎn)擊button,傳給方法里的算術(shù)運(yùn)算符不一樣,代碼如下:
<script type="text/javascript">
function cal(type){
var num1 = document.getElementById('inputId1');
var num2 = document.getElementById('inputId2');
var result;
switch(type){
case '+':
result = parseInt(num1.value) + parseInt(num2.value);
break;
case '-':
result = parseInt(num1.value) - parseInt(num2.value);
break;
case '*':
result = parseInt(num1.value) * parseInt(num2.value);
break;
case '/':
result = parseInt(num1.value) / parseInt(num2.value);
break;
}
var resultObj = document.getElementById('resultId');
resultObj.value = result;
}
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 簡易js代碼實(shí)現(xiàn)計(jì)算器操作
- js實(shí)現(xiàn)一個(gè)簡易計(jì)算器
- 簡易的JS計(jì)算器實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)一個(gè)簡易的計(jì)算器實(shí)例代碼
- javascript實(shí)現(xiàn)簡易計(jì)算器的代碼
- JavaScript實(shí)現(xiàn)簡易加法計(jì)算器
- 超級(jí)簡易的JS計(jì)算器實(shí)例講解(實(shí)現(xiàn)加減乘除)
- js實(shí)現(xiàn)簡易計(jì)算器功能
- js實(shí)現(xiàn)一個(gè)簡易的計(jì)算器
- 用JavaScript做一個(gè)簡易計(jì)算器的三種方法舉例
相關(guān)文章
JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實(shí)例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
javascript contains和compareDocumentPosition 方法來確定是否HTML節(jié)點(diǎn)間的關(guān)
一個(gè)很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2010-02-02
JavaScript 用Node.js寫Shell腳本[譯]
你懂JavaScript嗎?你需要寫一個(gè)Shell腳本嗎?那么你應(yīng)該試一下Node.js,它很容易安裝,而且很適合通過寫Shell腳本來學(xué)習(xí)它2012-09-09
ES6?class類實(shí)現(xiàn)繼承實(shí)例詳解
傳統(tǒng)的javascript中只有對象,沒有類的概念,下面這篇文章主要給大家介紹了關(guān)于ES6?class類實(shí)現(xiàn)繼承的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
js實(shí)現(xiàn)倒計(jì)時(shí)效果(小于10補(bǔ)零)
本文主要介分享了js實(shí)現(xiàn)倒計(jì)時(shí)效果(小于10補(bǔ)零)的實(shí)例代碼,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03

