用JavaScript寫一個簡單的計算器
摘要：
本文使用js實現了一個簡單的加、減、乘、除計算器。
以下是css部分程式碼：
*{
padding:0;
margin:0;
color: #424242;
}
.outer{
width:300px;
height:auto;
out...
本文使用js實現了一個簡單的加、減、乘、除計算器。
以下是css部分程式碼：
*{
padding:0;
margin:0;
color: #424242;
}
.outer{
width:300px;
height:auto;
outline:1px solid #b9b9b9;
margin:50px auto;
background: pink;
}
.title{
height:40px;
width:100%;
border-bottom:1px solid #b9b9b9;
text-align: left;
text-indent:10px;
line-height: 40px;
cursor: pointer;
}
.bodyBox{
width:90%;
height:auto;
padding:5%;
}
.calView{
width:100%;
height:75px;
outline:1px solid #b9b9b9;
background: rgba(255,255,255,.8);
overflow: scroll;
text-indent: 5px;
padding-top:5px;
}
.content,
.contentBtn{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.btn{
display: inline;
width:22%;
height:30px;
margin-top:15px;
text-align: center;
line-height:30px;
outline:1px solid #b9b9b9;
cursor: pointer;
}
.back,
.reset{
display: inline;
width:47%;
height:30px;
margin-top:15px;
text-align: center;
line-height:30px;
outline:1px solid #b9b9b9;
cursor: pointer;
}
以下是html部分程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計算器</title> <link rel="stylesheet" href="calculator.css"> </head> <body> <div class="outer"> <div class="title"> <span>計算器</span> </div> <div class="bodyBox"> <div class="calView"></div> <div class="content"> <span class="btn">7</span> <span class="btn">8</span> <span class="btn">9</span> <span class="btn">+</span> <span class="btn">4</span> <span class="btn">5</span> <span class="btn">6</span> <span class="btn">-</span> <span class="btn">1</span> <span class="btn">2</span> <span class="btn">3</span> <span class="btn">*</span> <span class="btn">0</span> <span class="btn">.</span> <span class="btn">=</span> <span class="btn">/</span> </div> <div class="contentBtn"> <span class="back">回退</span> <span class="reset">清空</span> </div> </div> </div> <script src="calculator.js"></script> </body> </html>
以下是js部分程式碼（使用了es6的語法，使用之前請將編輯器設定為支援es6語法）：
/**
* Created by Administrator on 2018/10/1.
*/
(function(){
let content=document.getElementsByClassName("content")[0];
let calView=document.getElementsByClassName("calView")[0];
let reset=document.getElementsByClassName("reset")[0];//清空按鈕
let back=document.getElementsByClassName("back")[0];//回退按鈕
let arr=[];//存放輸入的內容
content.onclick=function(event){
e=window.event||arguments[0];
let tar=e.target;
let val=tar.innerText;
if(calView.innerHTML.indexOf("=")!==-1){//如果已經計算出結果，則開始下一次計算，清空陣列
calView.innerHTML="";
arr=[];
}
calView.innerHTML="";
arr.push(val);//將輸入內容放入陣列
if(!isNaN(parseFloat(val))){//如果輸入數字，則進行拼接
joinNum(val);
}
if(isNaN(parseFloat(arr[arr.length-2])) && isNaN(parseFloat(arr[arr.length-1]))){//如果上一位和這一位為符號，則刪除這一位
arr.pop();
}
show();//更新視窗內容
if(val==="=" && arr.length>1){//如果輸入等號，則計算出結果
compute(arr);
}
};
reset.onclick=()=>{//清空輸入的內容
calView.innerHTML="";
arr=[];//清空陣列
};
back.onclick=()=>{//清空輸入的內容
arr.pop();
show();
};
/**
* 拼接輸入的內容
* @param val ：使用者輸入的內容
*/
function joinNum(val){
if(!isNaN(parseFloat(arr[arr.length-2]))){//檢測上一個是否為數字
arr[arr.length-2]=String(parseFloat(arr[arr.length-2])*10+parseFloat(val));
arr.pop();
}
if(arr[arr.length-2] === "/" && arr[arr.length-1] ==="0"){//如果分母為0，則刪除0
arr.pop();
}
}
/**
* 更新顯示視窗內容
*/
function show(){
let arrLen=arr.length;
let str="";
for(let i=0;i<arrLen;i++){
str+=arr[i];
}
calView.innerHTML=str;//將拼接好的字串顯示在結果視窗中
return str;
}
/**
* 計算出最終結果
*/
function compute(arr){
let showStr=show();
calView.innerHTML=showStr + eval(showStr.split("=")[0]).toFixed(6);//由於會出現精度丟失問題，因此這裡用toFixed()處理一下
}
})();
最終效果如下圖所示，樣式我寫得比較隨意，將就看吧！
（本文為原創，轉載請註明，謝謝！如果發現bug，請大家提出來！）