當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现简单计算器
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现简单计算器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、兩個輸入框輸入數值計算
步驟
1、編寫html代碼，實現計算器頁面視圖效果
2、編寫js，實現點擊輸入數字和符號輸出結果
1、編寫html
1.1定義兩個輸入框和一個隱藏框。
1.2定義加減乘除四個按鈕，并在里面設置一個單擊事件onclick，單擊后調用clac()函數，并將運算符號傳遞給函數。
1.3定義0-9十個按鈕，并在里面設置一個單擊事件onclick，單擊后調用click1()函數，并將數字傳遞給函數。
1.4定義一個計算按鈕，并在里面設置一個單擊事件onclick，單擊后調用result()函數，計算出結果。
1.5定義一個清空按鈕，并在里面設置一個單擊事件onclick，單擊后調用click2()函數，將輸入框的內容清空。
在<body></body>主體中編寫html以下代碼：
第一個數:<input type="number" name="num1" id="num1" /><br /> 第二個數:<input type="number" name="num2" id="num2" /><br /> <input type="hidden" name="num3" id="num3" />//隱藏框，type="hidden" <input type="button" value="加" onclick="clac('+')" /> <input type="button" value="減" onclick="clac('-')" /> <input type="button" value="乘" onclick="clac('*')" /> <input type="button" value="除" onclick="clac('/')" /> <br /> <input type="button" value="1" onclick="click1(1)" /> <input type="button" value="2" onclick="click1(2)" /> <input type="button" value="3" onclick="click1(3)" /> <input type="button" value="4" onclick="click1(4)" /> <input type="button" value="5" onclick="click1(5)" /> <br /> <input type="button" value="6" onclick="click1(6)" /> <input type="button" value="7" onclick="click1(7)" /> <input type="button" value="8" onclick="click1(8)" /> <input type="button" value="9" onclick="click1(9)" /> <input type="button" value="0" onclick="click1(0)" /><br /> <input type="button" value="計算" onclick="result()" /> <input type="button" value="清空" onclick="click2()" />2、編寫js
2.1定義一個flag標志，并賦值為true，當點擊計算符號之后，改變flag的值為false。
2.2創建click1函數，判斷flag的值，如果是true就定位到第一個輸入框，如果是false就定位到第二個輸入框，將點擊傳過來的值與輸入框里面的字符串拼接到一起。
document.querySelector()，進行html定位，如果是用class屬性來定位，定位時class屬性值前面要加點號(.)，如果是用id屬性來定位，定位時id屬性值前面要加#。
可以使用.value取出這個屬性的value值。
function click1(num){if(flag){var num1=document.querySelector("#num1");num1.value+=num;}else{var num2=document.querySelector("#num2");num2.value+=num;} }2.3創建clac函數，定位到隱藏框，將點擊傳過來的符號放入輸入框，并將flag值改為false。
function clac(s){var d=document.querySelector("#num3");d.value=s;flag=false; }2.4定義result函數，定位到兩個輸入框，取出其中的值并轉成整數，定位到隱藏輸入框，取出里面的符號，然后判斷是什么符號，進行相應的運算，彈出運算結果。
function result(){var num1=parseInt(document.querySelector("#num1").value);var num2=parseInt(document.querySelector("#num2").value);var d=document.querySelector("#num3").value;switch (d){case '+':alert(num1+num2);break;case '-':alert(num1-num2);break;case '*':alert(num1*num2);break;case '/':alert(num1/num2);break;default:alert("輸入有誤")break;} }2.5創建click2函數，定位三個輸入框，并復制為空。
function click2(){document.querySelector("#num1").value="";document.querySelector("#num2").value="";document.querySelector("#num3").value=""; }在<script></script>標簽中編寫以下JavaScript代碼 ：
<script type="text/javascript">var flag=true;function clac(s){var d=document.querySelector("#num3");d.value=s;flag=false;}function click1(num){if(flag){var num1=document.querySelector("#num1");num1.value+=num;}else{var num2=document.querySelector("#num2");num2.value+=num;}}function result(){var num1=parseInt(document.querySelector("#num1").value);var num2=parseInt(document.querySelector("#num2").value);var d=document.querySelector("#num3").value;switch (d){case '+':alert(num1+num2);break;case '-':alert(num1-num2);break;case '*':alert(num1*num2);break;case '/':alert(num1/num2);break;default:alert("輸入有誤")break;}}function click2(){document.querySelector("#num1").value="";document.querySelector("#num2").value="";document.querySelector("#num3").value="";} </script>效果圖如下?
?二、一個輸入框輸入數值和符號并計算
頁面html代碼如下：
<input type="text" id="num1" /> <br/> <input type="button" value="+" onclick="click2('+')"/> <input type="button" value="-" onclick="click2('-')"/> <input type="button" value="*" onclick="click2('*')"/> <input type="button" value="/" onclick="click2('/')"/> <br/> <input type="button" value="1" onclick="click1(1)"/> <input type="button" value="2" onclick="click1(2)"/> <input type="button" value="3" onclick="click1(3)"/> <input type="button" value="4" onclick="click1(4)"/> <input type="button" value="5" onclick="click1(5)"/> <br/> <input type="button" value="6" onclick="click1(6)"/> <input type="button" value="7" onclick="click1(7)"/> <input type="button" value="8" onclick="click1(8)"/> <input type="button" value="9" onclick="click1(9)"/> <input type="button" value="0" onclick="click1(0)"/> <br/> <br/> <input type="button" value="計算" onclick="eq()"/> <input type="button" value="清空" onclick="reset()"/>JavaScript代碼如下：?
<script type="text/javascript">var num1;function click1(num){num1=document.querySelector("#num1");num1.value+=num;}function click2(s){num1=document.querySelector("#num1");//定位到輸入框var lasts=num1.value.charAt(num1.value.length-1);//取出輸入框中字符串的最后一個字符，即運算符var ss=(lasts=='+'||lasts=='-'||lasts=='*'||lasts=='/');if(num1.value!=""&&!ss){num1.value+=s;}}function eq(){var n1="";var n2="";var s1=""num1=document.querySelector("#num1");num1.value+="=";var j=0;//循環遍歷字符串for(i in num1.value){var m=num1.value[j];if(m=="+"||m=="-"||m=="*"||m=="/"){//判斷是否是運算符，是的話執行以下語句n1=num1.value.substring(0,j);//截取運算符前面的字符串s1=num1.value[j];//獲取運算符n2=num1.value.substring(j+1,num1.value.length-1);//獲取運算符后面的字符串break;}j++;}//將截取的字符串轉成整數n1=parseInt(n1);n2=parseInt(n2);switch (s1){case "+":num1.value+=(n1+n2);break;case "-":num1.value+=(n1-n2);break;case "*":num1.value+=(n1*n2);break;case "/":num1.value+=(n1/n2);break;default:break;}}function reset(){num1=document.querySelector("#num1");num1.value="";}</script>效果圖如下?
三、 兩個數值、符號、結果分別一個輸入框
html代碼如下：
第一個值：<input type="number" class="clear" id="num1" /><br /> <input type="button" value="1" onclick="click1(1)" /> <input type="button" value="2" onclick="click1(2)" /> <input type="button" value="3" onclick="click1(3)" /> <input type="button" value="4" onclick="click1(4)" /> <input type="button" value="5" onclick="click1(5)" /> <input type="button" value="6" onclick="click1(6)" /> <input type="button" value="7" onclick="click1(7)" /> <input type="button" value="8" onclick="click1(8)" /> <input type="button" value="9" onclick="click1(9)" /> <input type="button" value="0" onclick="click1(0)" /> <input type="button" value="清除" onclick="reset1()" /> <hr /> 運算方法： <input type="text" id="num3" /><br /> <input type="button" value="加" onclick="calc('+')" /> <input type="button" value="減" onclick="calc('-')" /> <input type="button" value="乘" onclick="calc('*')" /> <input type="button" value="除" onclick="calc('/')" /> <hr /> 第二個值： <input type="number" class="clear" id="num2" /><br /> <input type="button" value="1" onclick="click2(1)" /> <input type="button" value="2" onclick="click2(2)" /> <input type="button" value="3" onclick="click2(3)" /> <input type="button" value="4" onclick="click2(4)" /> <input type="button" value="5" onclick="click2(5)" /> <input type="button" value="6" onclick="click2(6)" /> <input type="button" value="7" onclick="click2(7)" /> <input type="button" value="8" onclick="click2(8)" /> <input type="button" value="9" onclick="click2(9)" /> <input type="button" value="0" onclick="click2(0)" /> <input type="button" value="清除" onclick="reset2()" /> <hr /> <input type="button" value="計算" class="result" onclick="result()" /> <input type="text" name="res1" id="res1" value="" />?JavaScript代碼如下：
<script type="text/javascript">//第一個輸入框輸入數字function click1(num) {var num1 = document.querySelector("#num1");num1.value += num;}//第一個輸入框輸重置function reset1() {var num1 = document.querySelector("#num1");num1.value = "";}//第三個輸入框輸入數字function click2(num) {var num1 = document.querySelector("#num2");num1.value += num;}//第三個輸入框重置function reset2() {var num2 = document.querySelector("#num2");num2.value = "";}//第二個輸入框輸入運算符function calc(s) {var num3 = document.querySelector("#num3");num3.value = s;}//第四個輸入框輸出結果function result() {var num1 = parseInt(document.querySelector("#num1").value);var num2 = parseInt(document.querySelector("#num2").value);var s = document.querySelector("#num3").value;var res = document.querySelector("#res1");switch(s) {case '+':res.value = num1 + num2;break;case '-':res.value = num1 - num2;break;case '*':res.value = num1 * num2;break;case '/':res.value = num1 / num2;break;default:break;}} </script>效果圖如下：
總結
以上是生活随笔為你收集整理的JavaScript实现简单计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用JS完成一个简单的计算器功能
- 下一篇： [JavaScript实例解析]js计算