-
首先我们要做好一个计算器的界面，主要用到html与css的知识
设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了
colspan="5" 是合并五列的意思，表示这个单元格要占五列
rowspan="3"是合并三行的意思，表示这个单元格要占三行
这样一个简单的架构就完成了 -
接下来就是css的设计
3.border-spacing: 0px;
这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。
cursor: pointer;
这里代码的意义是：使鼠标放在上面时变成一个手的标志
- 接下来是javascript的代码，按照思路来一点点写
首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号
所以我们在table标签里加上onClick="calculater()"，添加一个点击事件
然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。
这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容
function calculater(){
results=event.srcElement.innerText;
}
results就是单元格的内容
- 当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值
display.innerText=results;
这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么
calculater()的代码就变成这样
function calculater(){
results=event.srcElement.innerText;
display.innerText=results;
}
这样我们就能输出我们点击的单元格内容
- 但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为
var results="";
function calculater(){
results+=event.srcElement.innerText;
display.innerText=results;
}
设置results为全局变量，event.srcElement.innerText用+=累加进results，这样我们就能输入并显示一条算式
我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
eval();能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来
加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发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;
}
最后完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/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;
}
</style>
<script type="text/javascript">
var results = "";
var results2 = "";
var calresults = "";
var lastkey = "";
var flg = 1;
var re1 = /^[\*|\/].+/;
var re2 = /.+[\*|\/]$/;
var re3 = /(\+|-|\*|\/)/;
var re4 = /.+[\+|-|\*|\/]{1,99}.+/
var re5 = /\d.+/;
function calculater() {
if (event.srcElement.innerText == "=") {
return;
}
if (event.srcElement.innerText == "c") {
results = "";
display.innerText = "0";
return;
}
if (event.srcElement.id == "display") {
return;
}
if (results.match(re1)) {
display.innerText = "输入错误";
results = "";
return;
}
if (lastkey.match(re3) && event.srcElement.innerText.match(re3)) {
return;
}
if (lastkey == "=" && event.srcElement.innerText.match(re3)) {
results = calresults;
}
if (event.srcElement.innerText == "+/-" && results != "") {
if (flg == -1) {
results = String(results2);
display.innerText = results;
flg = -flg;
return;
}
results2 = results;
results = "-" + "(" + results + ")";
flg = -flg;
display.innerText = results;
return;
}
results += event.srcElement.innerText;
lastkey = event.srcElement.innerText;
display.innerText = results;
}
function resultscalcaulte() {
if (results.match(re1) || results.match(re2)) {
display.innerText = "输入错误";
results = "";
return;
}
calresults = eval(results);
display.innerText = calresults;
lastkey = "=";
results = "";
}
</script>
</head>
<body>
<table id="calculater" onClick="calculater()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey">1</td>
<td class="numberkey">2</td>
<td class="numberkey">3</td>
<td class="numberkey">+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey">4</td>
<td class="numberkey">5</td>
<td class="numberkey">6</td>
<td class="numberkey">-</td>
<td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td>
</tr>
<tr>
<td class="numberkey">7</td>
<td class="numberkey">8</td>
<td class="numberkey">7</td>
<td class="numberkey">*</td>
</tr>
<tr>
<td class="numberkey">+/-</td>
<td class="numberkey">0</td>
<td class="numberkey">.</td>
<td class="numberkey">/</td>
</tr>
</body>
</html>
网友评论