完成样式
完成样式如图，计算器支持一般的加减乘除。
- C：清屏
- <-：退格
- +/-：正负转换
- H：历史记录（暂未完善）
实现函数和界面
此计算器中不包括历史记录，需要实现以下函数：
- clickBtn()：用于传递当前按键值的函数。
- display()：用于显示输入字符和显示结果的函数。
- clearRes()：用于清空结果和已输入字符的函数。
- backSpace()：用于实现退格操作的函数。
- convert()：用于实现反转正负的函数。
在此计算器中，每一个按键都是一个div，数字按键、小数点按键和加减乘除按键都是用的同一个函数clickBtn()，区别就是传递的参数不同，对应按键传递对应的参数。
使用一个输入框display来显示所得结果，界面排布使用flex布局进行设置。
HTML界面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#all {
width: 400px;
height: 650px;
border: solid 1px black;
margin: auto;
border-radius: 5px;
margin-top: 30px;
}
#top {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
#bottom {
height: 530px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
#display {
width: 370px;
height: 75px;
border: solid 1px black;
border-radius:5px;
font-size: 40px;
text-align: right;
}
#btn {
width: 80px;
height: 80px;
border: solid 1px black;
flex-shrink: 0;
border-radius:5px;
font-size: 20px;
margin: 7px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#btn:hover {
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
<input type="text" id="display">
</div>
<div id="bottom">
<div id="btn" onclick="backSpace()">
<-
</div>
<div id="btn" onclick="clearRes()">
C
</div>
<div id="btn" onclick="convert()">
+/-
</div>
<div id="btn" value="+" onclick="clickBtn('+')">
+
</div>
<div id="btn" value="9" onclick="clickBtn('9')">
9
</div>
<div id="btn" value="8" onclick="clickBtn('8')">
8
</div>
<div id="btn" value="7" onclick="clickBtn('7')">
7
</div>
<div id="btn" value="-" onclick="clickBtn('-')">
-
</div>
<div id="btn" value="6" onclick="clickBtn('6')">
6
</div>
<div id="btn" value="5" onclick="clickBtn('5')">
5
</div>
<div id="btn" value="4" onclick="clickBtn('4')">
4
</div>
<div id="btn" value="*" onclick="clickBtn('*')">
x
</div>
<div id="btn" value="3" onclick="clickBtn('3')">
3
</div>
<div id="btn" value="2" onclick="clickBtn('2')">
2
</div>
<div id="btn" value="1" onclick="clickBtn('1')">
1
</div>
<div id="btn" value="/" onclick="clickBtn('/')">
÷
</div>
<div id="btn" value="0" onclick="clickBtn('0')">
0
</div>
<div id="btn" value="." onclick="clickBtn('.')">
.
</div>
<div id="btn">
H
</div>
<div id="btn" onclick="display()">
=
</div>
</div>
</div>
</body>
</html>
全局变量
- res：显示最终结果。
- d：获取显示结果的输入框display对象。
- res_x：显示用户输入的式子。
var res = "";
var d = document.getElementById("display");
var res_x = "";
计算结果
使用一个变量res和变量res_x来存储计算的式子和结果。使用者在点击不同按键时不断传递参数，res 不断与传进来的参数进行相加即字符串拼接并将结果输出在输入框display上，最后调用eval()方法计算最终结果把值输出在输入框display上。
res和res_x有何不同？他们两个都是用于计算结果的，可是在用户显示界面上，要想让乘号显示“ x ”而不是代码中的“ * ”（除号同理），所以需要res_x变量来用于存放该显示给用户的字符串，而真正用于计算结果的还是变量res。
代码如下：
function clickBtn(nums) {
res = res + nums;
if(nums == '*') {
nums = 'x';
}
if(nums == '/') {
nums = '÷';
}
res_x = res_x + nums;
d.value = res_x;
}
显示结果
显示结果只需调用eval方法并将结果输出至输入框即可。代码如下：
function display() {
d.value = eval(res);
res = "";
res_x = "";
}
清屏
清屏功能只需要将res和res_x清空，再将结果输出至输入框。代码如下：
function clearRes() {
res = "";
res_x = "";
d.value = res_x;
}
退格
退格功能只需使用substring方法，截取从下标0到res.length - 1的长度的字符串，然后覆盖原先的res。代码如下：
function backSpace() {
res = res.substring(0,res.length - 1);
res_x = res_x.substring(0,res_x.length - 1);
d.value = res_x;
}
正负反转
正负反转功能只需将结果乘以-1并输出至输入框。代码如下：
function convert() {
res = res * (-1);
d.value = res;
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#all {
width: 400px;
height: 650px;
border: solid 1px black;
margin: auto;
border-radius: 5px;
margin-top: 30px;
}
#top {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
#bottom {
height: 530px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
#display {
width: 370px;
height: 75px;
border: solid 1px black;
border-radius:5px;
font-size: 40px;
text-align: right;
}
#btn {
width: 80px;
height: 80px;
border: solid 1px black;
flex-shrink: 0;
border-radius:5px;
font-size: 20px;
margin: 7px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#btn:hover {
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
<input type="text" id="display">
</div>
<div id="bottom">
<div id="btn" onclick="backSpace()">
<-
</div>
<div id="btn" onclick="clearRes()">
C
</div>
<div id="btn" onclick="convert()">
+/-
</div>
<div id="btn" value="+" onclick="clickBtn('+')">
+
</div>
<div id="btn" value="9" onclick="clickBtn('9')">
9
</div>
<div id="btn" value="8" onclick="clickBtn('8')">
8
</div>
<div id="btn" value="7" onclick="clickBtn('7')">
7
</div>
<div id="btn" value="-" onclick="clickBtn('-')">
-
</div>
<div id="btn" value="6" onclick="clickBtn('6')">
6
</div>
<div id="btn" value="5" onclick="clickBtn('5')">
5
</div>
<div id="btn" value="4" onclick="clickBtn('4')">
4
</div>
<div id="btn" value="*" onclick="clickBtn('*')">
x
</div>
<div id="btn" value="3" onclick="clickBtn('3')">
3
</div>
<div id="btn" value="2" onclick="clickBtn('2')">
2
</div>
<div id="btn" value="1" onclick="clickBtn('1')">
1
</div>
<div id="btn" value="/" onclick="clickBtn('/')">
÷
</div>
<div id="btn" value="0" onclick="clickBtn('0')">
0
</div>
<div id="btn" value="." onclick="clickBtn('.')">
.
</div>
<div id="btn">
H
</div>
<div id="btn" onclick="display()">
=
</div>
</div>
</div>
<script type="text/javascript">
var res = "";
var d = document.getElementById("display");
var res_x = "";
function clickBtn(nums) {
res = res + nums;
if(nums == '*') {
nums = 'x';
}
if(nums == '/') {
nums = '÷';
}
res_x = res_x + nums;
d.value = res_x;
}
function display() {
d.value = eval(res);
res = "";
res_x = "";
}
function clearRes() {
res = "";
res_x = "";
d.value = res_x;
}
function backSpace() {
res = res.substring(0,res.length - 1);
res_x = res_x.substring(0,res_x.length - 1);
d.value = res_x;
}
function convert() {
res = res * (-1);
d.value = res;
}
</script>
</body>
</html>