本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒） 需要源代码的可以加下面的QQ群，里面有各种学习资料，期待大家的加入！
点我进群 一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)
1.编写前端界面
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>我的计算器
</title>
-
<style>
-
.containor{
-
border:
1px solid black;
-
background-color:
#fafafa;
-
height:
380px;
-
width:
296px;
-
margin: auto;
-
margin-top:
40px;
-
}
-
.top{
-
background-color: lightgray;
-
height:
30px;
-
}
-
a{
-
display: block;
-
float: left;
-
font-size:
8px;
-
height:
26px;
-
padding:
0
6px;
-
margin-left:
6px;
-
line-height:
26px;
-
}
-
-
a
:hover{
-
background-color: dimgray;
-
color: white;
-
cursor: default;
-
}
-
-
.input{
-
width:
86%;
-
height:
60px;
-
padding:
4px;
-
margin:
0 auto;
-
margin-top:
12px;
-
}
-
.input
:focus{
-
outline: none;
-
}
-
button{
-
width:
50px;
-
height:
30px;
-
margin:
2px;
-
text-align: center;
-
font-size:
10px;
-
border:
0.5px solid gray;
-
-
}
-
button
:hover{
-
border:
1px solid gray;
-
background-color:
#ffaa55;
-
outline: none;
-
}
-
.bottom{
-
width:
100%;
-
height:
30px;
-
background-color:lightgray;
-
color: white;
-
position: relative;
-
margin-top:
56px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="containor">
-
<div class="top">
-
<a>查看（V）
</a>
-
<a style="margin-left: 40px;">编辑（E）
</a>
-
<a style="margin-left: 40px;">帮助（H）
</a>
-
</div>
-
<div style="text-align: center">
-
<input id="cin" class="input">
-
</div>
-
-
<div style="margin-left: 2px;">
-
<div style="margin:20px 10px;height:160px;">
-
<div style="float: left;">
-
<div>
-
<button>MC
</button>
<button>MR
</button>
<button>MS
</button>
<button>M+
</button>
<button>M-
</button>
<br>
-
<button>BK
</button>
<button>CE
</button>
<button>C
</button>
<button >(
</button>
<button>)
</button>
<br>
-
<button>7
</button>
<button>8
</button>
<button>9
</button>
<button >*
</button>
<button>/
</button>
<br>
-
<button>4
</button>
<button>5
</button>
<button>6
</button>
<button >%
</button>
<button>1/x
</button>
<br>
-
</div>
-
<div style="float: left;">
-
<button>1
</button>
<button>2
</button>
<button>3
</button>
<button>-
</button>
<br>
-
<button style="width: 104px">0
</button>
<button>.
</button>
<button>+
</button>
-
</div>
-
<div style="float: left;">
-
<button style="height: 64px;margin-top: 2px">=
</button>
-
</div>
-
</div>
-
-
</div>
-
</div>
-
<div class="bottom">
-
-
</div>
-
</div>
-
-
</body>
-
</html>
界面如下：
2.通过JS实现计算器功能
- 在需要实现功能的地方添加相应的函数点击事件
-
-
<button onclick="back1()">BK
</button>
<button onclick="clearerr()">CE
</button>
<button onclick="clear1()">C
</button>
<button onclick="inputStr('(')">(
</button>
<button onclick="inputStr(')')">)
</button>
<br>
-
<button onclick="inputStr(7)">7
</button>
<button onclick="inputStr(8)" >8
</button>
<button onclick="inputStr(9)">9
</button>
<button onclick="inputStr('*')">*
</button>
<button onclick="inputStr('/')">/
</button>
<br>
-
<button onclick="inputStr(4)">4
</button>
<button onclick="inputStr(5)">5
</button>
<button onclick="inputStr(6)">6
</button>
<button onclick=inputStr('%')>%
</button>
<button onclick="reciprocal()">1/x
</button>
<br>
-
<button onclick="inputStr(1)">1
</button>
<button onclick="inputStr(2)">2
</button>
<button onclick="inputStr(3)">3
</button>
<button onclick="inputStr('-')">-
</button>
-
<button onclick="inputStr(0)">0
</button>
<button onclick="inputStr('.')">.
</button>
<button onclick="inputStr('+')">+
</button>
-
<button onclick="equal()">=
</button>
- 对函数进行初始化
-
<script>
-
window.οnlοad=
function(){
-
// 初始化内容
-
var res =
eval(
"(1+4)*2");
-
console.log(res);
-
//打印进行测试
-
}
-
</script>
- 实现输入框的输入（数字、小数点、运算符、括号）
-
<input id=
"cin"
class=
"input">
-
-
-
-
<script>
-
function inputStr(c) {
-
var cin =
document.getElementById(
"cin");
-
var val = cin.value + c;
-
cin.value = val;
-
}
-
</script>
- 等于号的实现
-
function equal() {
-
var cin =
document.getElementById(
"cin");
-
var val = cin.value;
-
var res =
eval(val);
-
cin.value = res;
-
}
- 清屏C 、退格BK、错误回退CE的实现
-
function clear1() {
-
var cin =
document.getElementById(
"cin");
-
cin.value =
"";
-
// if(cin.value.length>0){
-
// document.getElementById("cin").value = "";
-
// }
-
}
-
function back1() {
-
var cin =
document.getElementById(
"cin");
-
cin.value = cin.value.substr(
0,cin.value.length
-1);
-
}
-
function clearerr() {
-
var cin =
document.getElementById(
"cin");
-
var val = cin.value;
-
var index = val.lastIndexOf(
"-");
-
if(index===
-1){
-
index = val.lastIndexOf(
"+");
-
}
-
if(index===
-1){
-
index = val.lastIndexOf(
"*");
-
}
-
if(index===
-1){
-
index = val.lastIndexOf(
"/");
-
}
-
if(index!==
-1){
-
val = val.substring(
0,index+
1);
-
}
-
-
cin.value = val;
-
}
- 倒数的实现
-
function reciprocal() {
-
var cin =
document.getElementById(
"cin");
-
var rst =
1/cin.value;
-
cin.value = rst;
-
}
目前 查看、编辑、帮助以及按钮的首行功能还未实现，可自行添加。