使用JS实现简单计算器的方法
生活随笔
收集整理的這篇文章主要介紹了
使用JS实现简单计算器的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天小編給大家分享的是使用JS實現簡單計算器的方法，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
JS是什么
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
JS實現簡單計算器
頁面布局設計（HTML+CSS)
??由于在之前的博客中有對html和css進行詳細的講解，再次就不多敘述，直接上代碼。因為js中用到了JQuery選擇器所以在html中使用<script></script>標簽引入了JQuery，在html中為每個按鈕單擊綁定計算器事件cal()并傳入當前點擊對象this。
??.html文件：
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>簡單計算器</title> <linkrel="stylesheet"type="text/css"href="./style.css"><!--css樣式--> <scriptsrc="https://code.jquery.com/jquery-latest.min.js"></script><!--引用JQuery庫--></head><body> <p> <table> <tr> <tdcolspan="3"><inputtype="text"value="0"/></td> </tr> <tr> <td><buttonid="c11"onclick="cal(this)">+</button></td> <td><buttonid="c12"onclick="cal(this)">-</button></td> <td><buttonid="c13"onclick="cal(this)">×</button></td> <td><buttonid="c14"onclick="cal(this)">/</button></td> </tr> <tr> <td><buttonid="c21"onclick="cal(this)"value="7">7</button></td> <td><buttonid="c22"onclick="cal(this)"value="8">8</button></td> <td><buttonid="c23"onclick="cal(this)"value="9">9</button></td> <tdrowspan="2"><buttonid="c24"onclick="cal(this)">C</button></td> </tr> <tr> <td><buttonid="c31"onclick="cal(this)"value="4">4</button></td> <td><buttonid="c32"onclick="cal(this)"value="5">5</button></td> <td><buttonid="c33"onclick="cal(this)"value="6">6</button></td> </tr> <tr> <td><buttonid="c41"onclick="cal(this)"value="1">1</button></td> <td><buttonid="c42"onclick="cal(this)"value="2">2</button></td> <td><buttonid="c43"onclick="cal(this)"value="3">3</button></td> <tdrowspan="2"><buttonid="c44"onclick="cal(this)">=</button></td> </tr> <tr> <tdcolspan="2"><buttonid="c51"onclick="cal(this)"value="0">0</button></td> <td><buttonid="c53"onclick="cal(this)">.</button></td> </tr> </table> </p> <scriptsrc="./calculator.js"></script><!--js腳本--></body></html>
??.css文件：
input{
width:200px;
height:50px;
margin-bottom:10px;
padding:0;
font:18pxbold;}button{
width:50px;
height:40px;
margin-bottom:10px;
border:1pxdashedblack;
background-color:#ffc4cc;}#c24{
height:93px;}#c44{
height:93px;}#c51{
width:122px;}#c44,#c24,#c14{
margin-left:10px;}
??靜態頁面如圖示：
實現計算部分（JS）
1.功能：實現簡單的數值的加減乘除計算，以及清屏功能
2.操作：例如：123×29；以此點擊1、2、3、，點擊×號，依次點擊2、9，最后點擊＝，即可計算出結果3567
示例如圖：
3.缺點：
-
不能進行負數的計算，會產生NaN錯誤；
-
不能進行連續計算，一次只能進行兩個數之間的運算；如果要在之前結果上繼續計算可以直接按運算符號和下一個數；若要開始新的計算，則需要先清屏。
4.思路展示：
-
文本框顯示：因為文本框顯示的內容根據點擊的按鈕實時變化，為了修改簡單，在這里使用JQuery選擇器選中文本框，賦值給一個全局變量input，之后我們根據input的val()方法修改它的值就好。
代碼如下：
varinput=$("input");
-
按鈕id獲取：因為后面我們要根據不同的按鈕進行不同的操作，所以在cal()函數中第一步先獲取按鈕的id，方便后面做判斷用。
代碼如下：
letbtn=e.id;
-
數值輸入：根據按鈕的id判斷是否為數字或者小數點，如果是的話，進行數字輸入操作。先判斷當前文本框的值是不是0，如果是0，則用當前輸入覆蓋input的值；若非0，則將當前輸入連接在input值后面。
代碼如下：
//若input的值為0 input.val(btn_value);//若input的值非0 input.val(input.val()+btn_value);
-
符號輸入：根據按鈕的id判斷是否為運算符號，如果是的話，進行符號輸入操作。不考慮連續運算，則先判斷當前文本框的值是否含有+、×、/(不考慮-是因為要進行減法運算)，如果有，則彈出“不支持該運算”；若無，則將該運算符號連接在input值后面。
代碼如下：
//若input的值含有+、×、/
alert("連續運算功能未上線!")//若input的值不含有+、×、/
input.val(input.val()+當前運算符號);
-
數值計算：根據按鈕的id判斷是否為等號，如果是的話，進行數值計算操作。進行選擇判斷，使用indexOf()方法判斷input的值中含有+、×、/哪個標點符號，然后以該符號位置為分隔，使用substring()方法截取該符號前面的值強制轉化為Float型后賦值給num1，截取該符號后面的值強制轉化為Float型后賦值給num2，進行相應的計算。（注意除法時分母不能為0）
代碼如下：
if(input_value.indexOf("+")!==-1){
pos=input_value.indexOf("+");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
elseif(input_value.indexOf("-")!==-1){
pos=input_value.indexOf("-");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
elseif(input_value.indexOf("×")!==-1){
pos=input_value.indexOf("×");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
elseif(input_value.indexOf("/")!==-1){
pos=input_value.indexOf("/");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0===0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
-
清屏：根據按鈕的id判斷是否為符號C，如果是的話，進行清屏操作。
代碼如下：
input.val(0);
5. JavaScript文件如下：
"usestrict"varinput=$("input");functioncal(e){
letbtn=e.id;
//清零
if(btn==="c24"){
input.val(0);
}
//數值輸入
elseif(btn==="c51"||btn==="c41"||btn==="c42"||btn==="c43"
||btn==="c31"||btn==="c32"||btn==="c33"
||btn==="c21"||btn==="c22"||btn==="c23"){
letbtn_value=document.getElementById(btn).getAttribute("value");
if(input.val()==="0"){
input.val(btn_value);
}
else{
input.val(input.val()+btn_value);
}
}
elseif(btn==="c11"){
letinput_value=input.val();
if(input_value.indexOf("+")===-1&&input_value.indexOf("-")===-1
&&input_value.indexOf("×")===-1&&input_value.indexOf("/")===-1){
input.val(input.val()+"+");
}
else{
alert("連續運算功能未上線!")
}
}
elseif(btn==="c12"){
letinput_value=input.val();
if(input_value.indexOf("+")===-1&&input_value.indexOf("-")===-1
&&input_value.indexOf("×")===-1&&input_value.indexOf("/")===-1){
input.val(input.val()+"-");
}
else{
alert("連續運算功能未上線!")
}
}
elseif(btn==="c13"){
letinput_value=input.val();
if(input_value.indexOf("+")===-1&&input_value.indexOf("-")===-1
&&input_value.indexOf("×")===-1&&input_value.indexOf("/")===-1){
input.val(input.val()+"×");
}
else{
alert("連續運算功能未上線!")
}
}
elseif(btn==="c14"){
letinput_value=input.val();
if(input_value.indexOf("+")===-1&&input_value.indexOf("-")===-1
&&input_value.indexOf("×")===-1&&input_value.indexOf("/")===-1){
input.val(input.val()+"/");
}
else{
alert("連續運算功能未上線!")
}
}
elseif(btn==="c53"){
input.val(input.val()+".");
}
elseif(btn==="c44"){
letpos,num1,num2;
letinput_value=input.val();
if(input_value.indexOf("+")!==-1){
pos=input_value.indexOf("+");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
elseif(input_value.indexOf("-")!==-1){
pos=input_value.indexOf("-");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
elseif(input_value.indexOf("×")!==-1){
pos=input_value.indexOf("×");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
elseif(input_value.indexOf("/")!==-1){
pos=input_value.indexOf("/");
num1=parseFloat(input_value.substring(0,pos));
num2=parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0===0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
}}
總結
以上是生活随笔為你收集整理的使用JS实现简单计算器的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP CRM里的settype和rel
- 下一篇： 鲁大师发布Q1显卡排行榜：N卡A卡胶着