本文将详细讲解如果用HTML，css，javascript与正则表达写一个简单计算器，由于篇幅较长，我们分开几篇来讲。
方法/步骤
1首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码
| 0 |
| 1 | 2 | 3 | + | c |
| 4 | 5 | 6 | - | = |
| 7 | 8 | 7 | * |
| +/- | 0 | . | / |
上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了colspan='5' 是合并五列的意思，表示这个单元格要占五列rowspan='3'是合并三行的意思，表示这个单元格要占三行效果如下，这样一个简单的架构就完成了2接下来就是css的设计，下面是代码 *{ padding:0; margin:1px; } #calculater{ margin: auto; margin-top: 30px; border: solid 6px #2371D3; border-spacing: 0px; } #display{ width: 100%; height: 30px; border-bottom: solid 4px #2371D3; font-weight: bold; color: #193D83; font-family: 黑体; padding-left: 2px; } .numberkey{ cursor: pointer; width: 40px; height: 30px; border: solid 1px #FFFFFF; background: #2371D3; color: #ffffff; text-align: center; font-weight: bold; font-family: 黑体; } #equality{ cursor: pointer; width: 40px; height: 100%; background: #2371D3; border: solid 1px #FFFFFF; color: #ffffff; text-align: center; font-weight: bold; font-family: 黑体; } .numberkey:hover{ background: #EA6F30; } #equality:hover{ background: #EA6F30; }以上是css代码，比较简单 border-spacing: 0px;这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。 cursor: pointer;这里代码的意义是：使鼠标放在上面时变成一个手的标志效果如下
4当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值display.innerText=results;这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么calculater()的代码就变成这样 function calculater(){ results=event.srcElement.innerText; display.innerText=results; }这样我们就能输出我们点击的单元格内容
5但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为 var results=''; function calculater(){ results+=event.srcElement.innerText; display.innerText=results; }设置results为全局变量，event.srcElement.innerText用+=累加进results，这样我们就能输入并显示一条算式
6我们在“=”单元格标签里加上onClick='resultscalcaulte()'，计算这个结果 function resultscalcaulte(){ calresults=eval(results); display.innerText=calresults; }eval();能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来
7加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上 if (event.srcElement.innerText=='=') { return; }使点击“=”单元格触发的calculater()函数得不到任何结果最后得到最简单的计算器运算代码 var results=''; var calresults=''; function calculater(){ if (event.srcElement.innerText=='=') { return; } results+=event.srcElement.innerText; display.innerText=results; } function resultscalcaulte(){ calresults=eval(results); display.innerText=calresults; }下面是计算7*8的结果
8当然这样的计算并没有使用价值，我们将在下篇继续完善这个计算器的机能
