版权声明:本文为博主原创文章,未经博主允许不得转载。 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;
反思与思考:
项目已知缺陷,项目无法进行小数输入,后期有时间会跟进(考虑美观问题这次没有加入) 。
扫描二维码关注公众号,回复: 4533875 查看本文章也希望更过大佬可以一起参与优化完善,本人笨拙,但会虚心接受大佬的指点。
Web全栈技术交流
点击链接加入群聊【Web全栈交流群】:https://jq.qq.com/?_wv=1027&k=5rnUzsF