本文使用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,
.back,
.reset{
display: inline;
width:22%;
height:30px;
margin-top:15px;
text-align: center;
line-height:30px;
cursor: pointer;
background: #ffe4e8;
outline:none;
border:3px solid #ffa2a5;
border-left:none;
border-top:none;
}
.back,
.reset{
width:47%;
}
以下是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">
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">+</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">-</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">*</button>
<button class="btn">0</button>
<button class="btn">.</button>
<button class="btn">=</button>
<button class="btn">/</button>
</div>
<div class="contentBtn">
<button class="back">回退</button>
<button class="reset">清空</button>
</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.onmousedown=function(event){
e=window.event||arguments[0];
let tar=e.target||e.srcElement;
tar.style.boxShadow="-1px -1px 3px #ffa2a5 inset";//設置按鈕點擊內陰影樣式
content.onmouseup=function(event){
tar.style.boxShadow="none";
};
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，請大家提出來！）