本文使用js实现了一个简单的加、减、乘、除计算器。
以下是css部分代码：
*{ padding:0; margin:0; color: #424242; } .outer{ 300px; height:auto; outline:1px solid #b9b9b9; margin:50px auto; background: pink; } .title{ height:40px; 100%; border-bottom:1px solid #b9b9b9; text-align: left; text-indent:10px; line-height: 40px; cursor: pointer; } .bodyBox{ 90%; height:auto; padding:5%; } .calView{ 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;
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{
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，请大家提出来！）