1。普通计算器代码实现功能：
- 加减乘除运算功能
- 取小数
- 取相反数
- 清除一位数及运算符
- 全部清除
2。界面：
此界面参照oppo r9手机自带计算器的界面
3。思路
（1）显示：
显示界面实际为两个框，下方的是showwin，上方的是calwin
用js的字符串拼接将点击的值拼接起来存储在results中，lastkey存储当前鼠标点击的值，然后将results的值放入showwin中，显示出来
（2）加减乘除运算：
点击 = 后，显示运算的结果值，此时运用到js中的eval（）函数，可计算某个字符串。
（3）清除全部：
这个功能很容易实现，只需都初始化就行
（4）清除一位操作：
本来我想的很复杂，但是后来想到了js强大的自身封装好的函数功能，可以直接使用substr（）函数，此函数从字符串中抽取从 start 下标开始的指定数目的字符，清除一位的话就是最后一位不要了，所以我们就取0到字符串的长度-1的长度显示出来。
（5）取负
设置一个变量flag用来存储现在数的正负，初始为正，故flag为1。再设置一个变量results2来存储正值。每次都判断flag是1还是-1来进行不同的运算就可以了。
4。注意事项
（1）当点击的是”=”或是显示界面的空白处时，不返回任何值。因为此函数是点击就会在显示界面中显示点击值
（2）当点击两次或多次运算位时，不返回任何值
（3）一次运算结束之后，运算结果参与第二次运算。此时当点击的是运算符时，就会直接进行第二次的运算，进行字符串的拼接。
（4）点击小数点时，当没有输入数据，会直接变成0.xx
（5）如果数字前是乘除或后面是乘除然后点击了“=”，则显示输入错误
5。存在的不足
（1）lastkey的值还是有一些乱。
（2）刚刚在写博客的时候发现，小数点这里的问题很多，比如点击了多次小数点，还有比如已经是1.23然后再点击“.”的时候会显示1.23.xx这样的。需要继续改进。
6。需要掌握的知识：
js:
- 正则表达式（初步了解即可）
- event对象。（这个需要考虑一下兼容性问题）
- obj.substr()
- obj.match()
- eval()
css:
border-spacing: 0;
7。代码
html及js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>calculator</title>
</head>
<body>
<table onclick="calculator()" id="calculator">
<tr>
<td colspan="4" id="calwin"> </td>
</tr>
<tr>
<td colspan="4" id="showwin">0</td>
</tr>
<tr>
<td class="numberbtn" id="deletebtn">C</td>
<td class="numberbtn">+/-</td>
<td class="numberbtn"><-]</td>
<td class="operatebtn">/</td>
</tr>
<tr>
<td class="numberbtn">7</td>
<td class="numberbtn">8</td>
<td class="numberbtn">9</td>
<td class="operatebtn">*</td>
</tr>
<tr>
<td class="numberbtn">4</td>
<td class="numberbtn">5</td>
<td class="numberbtn">6</td>
<td class="operatebtn">-</td>
</tr>
<tr>
<td class="numberbtn">1</td>
<td class="numberbtn">2</td>
<td class="numberbtn">3</td>
<td class="operatebtn">+</td>
</tr>
<tr>
<td class="numberbtn" colspan="2">0</td>
<td class="numberbtn">.</td>
<td class="operatebtn" onclick="resequal()">=</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var calresults="";//运算结果
var results="";//运算表达式
var results2="";//存储正值
var lastkey="";//存储点击值
var flag=1;//正负号变换标志
//正则表达式
var re1=/^[\*|\/].+/;//操作数前面是乘或除
var re2=/.+[\*|\/]$/;//操作数最后面是乘或除
var re3=/(\+|-|\*|\/)/;//加减乘除
function calculator(){
//如果点击的是=或者是上面显示框的空白处，就不返回
if (event.srcElement.innerText=="="||event.srcElement.id=="showwin"||event.srcElement.id=="calwin") {
return;
}
//清除全部功能
else if (event.srcElement.innerText=="C") {
results="";
calresults="";
showwin.innerText="0";
calwin.innerText="";
return;
}
//清除一位
else if(event.srcElement.innerText=="<-]") {
results=results.substr(0,results.length-1);
showwin.innerText = results;
return;
}
//点击两次运算位
else if (lastkey.match(re3)&&event.srcElement.innerText.match(re3)) {
return;
}
//取负
else if (event.srcElement.innerText=="+/-"&&results!="") {
if (flag==-1) {
//强制转换为字母类型
results=String(results2);
showwin.innerText=results;
flag=-flag;
return;
}
results2=results;
results="-"+results;
flag=-flag;
showwin.innerText=results;
return;
}
//取上次运算结果继续运算
else if (lastkey=="="&&event.srcElement.innerText.match(re3)) {
results=calresults;
results+=event.srcElement.innerText;
showwin.innerText=results;
}
//如果没有输入数据点击小数点时
else if (event.srcElement.innerText=="."&&results=="") {
results="0"+event.srcElement.innerText;
showwin.innerText=results;
}
else{
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
showwin.innerText=results;
}
}
function resequal(){
//如果数字前是乘除或数字后是乘除
if (results.match(re1)||results.match(re2)) {
showwin.innerText="输入错误！";
calwin.innerText="";
results="";
return;
}
else{
calresults=eval(results);
showwin.innerText=calresults;
calwin.innerText=results;
lastkey="=";
}
}
</script>
</body>
</html>css：
*{
padding:0;
margin:1px;
}
#calculator{
margin: auto;
margin-top: 50px;
border-spacing: 0;
}
#calwin{
width: 100%;
max-width: 246px;
height: 60px;
background-color:rgb(23,24,32);
font-weight: bold;
color: #ddd;
text-align: right;
padding-right: 5px;
}
#showwin{
width: 100%;
max-width: 246px;
height: 30px;
background-color: rgb(23,24,32);
color: rgb(220,220,221);
font-weight: bold;
overflow: hidden;
text-align: right;
padding-right: 5px;
}
.numberbtn{
cursor:pointer;
width: 60px;
height: 60px;
text-align: center;
border: 0.5px solid rgb(54,54,58);
background-color: rgb(55,59,74);
color: #fff;
}
.numberbtn:hover,.numberbtn:active{
background-color: rgb(39,40,47);
}
.operatebtn{
cursor: pointer;
width: 60px;
height: 60px;
text-align: center;
border: 0.5px solid rgb(54,54,58);
background-color: rgb(166,61,70);
color: #fff;
}
.operatebtn:hover,.operatebtn:active{
background-color: rgb(146,53,61);
}