本文使用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，请大家提出来！）
原文：https://www.cnblogs.com/pandaQQQ/p/9736695.html