版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Point9/article/details/84860651
这是一个表现我审美的时刻，简单清新的外观，略显实用的功能！
一、功能需求
1、能够实现简单的算数运算（加减乘除取余）
2、具有清屏功能（基于web页面的，省的每次都要刷新）
二、具体实现
1、页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#textShow{
width: 208px;
height: 40px;
font-size: 30px;
text-align: right;
}
input{
width: 50px;
height: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<table border="2" cellspacing="0">
<tr>
<th colspan="4"><input type="text" id="textShow"/></th>
</tr>
<tr>
<td><input type="button" value="7" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="8" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="9" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="+" onclick="btn(this)" class="in" /></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="5" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="6" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="-" onclick="btn(this)" class="in" /></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="2" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="3" onclick="btn(this)" class="num" /></td>
<td><input type="button" value="*" onclick="btn(this)" class="in" /></td>
</tr>
<tr>
<td><input type="button" value="C" onclick="btn(this)" class="in" /></td>
<td><input type="button" value="%" onclick="btn(this)" class="in" /></td>
<td><input type="button" value="=" onclick="btn(this)" class="in" /></td>
<td><input type="button" value="÷" onclick="btn(this)" class="in" /></td>
</tr>
</table>
</body>
</html>2、JS代码实现
<script type="text/javascript">
var num1="0";//记录第一个操作数
var num2="0";//记录第二个操作数
var flag ="";//记录符号
function btn(obj){
//获取文本框的内容，将点击对象的内容复制进去
var textShow= document.getElementById("textShow");
//判断当前点击的按钮是否为数字
if(obj.value=="+"||obj.value=="-"||obj.value=="*"||obj.value=="÷"||obj.value=="%"){
//分别记录第一个操作数，和符号并请屏幕
num1 = textShow.value;
flag = obj.value;
textShow.value="";
}else if(obj.value=="C"){//清除历史记录
textShow.value="";
num1="";
num2="";
}else if(obj.value=="="){
//解决问题：未输入值时直接按等于会出现NaN
num2 = textShow.value;
if(flag=="+"){
textShow.value =parseInt(num1)+parseInt(num2);
}else if(flag=="-"){
textShow.value =num1-num2;
}else if(flag=="*"){
textShow.value = num1*num2;
}else if(flag=="÷"){
textShow.value = parseFloat(num1/num2);
}else{
textShow.value = parseInt(num1%num2);
}
}else{
//解决不能输入两位数的问题，第二次输出的还是数字的话可以继续追加
textShow.value = textShow.value + obj.value;
}
}
</script>三、问题与思考
遇到的问题：
1、项目完成后，发现计算器只能输入个位数
解决方案：textShow.value = textShow.value + obj.value;
2、在没有输入数字时，直接点=号，会出现NaN
解决方案：当输入符号为=号时，先判断运算符是否为空，为空的话输出0；
反思与思考：
项目已知缺陷，项目无法进行小数输入，后期有时间会跟进（考虑美观问题这次没有加入） 。
也希望更过大佬可以一起参与优化完善，本人笨拙，但会虚心接受大佬的指点。
Web全栈技术交流
点击链接加入群聊【Web全栈交流群】：https://jq.qq.com/?_wv=1027&k=5rnUzsF
