目录
一、计算器原理
二、源码
三、结果展示
四、不足与改进
一、计算器原理
首先我们列出想象中简易计算器的样子：
虽然画的磕碜但是应该不影响下面的操作hh
首先想到用表格形式在网页中表示它，是一个5行4列的表格，接着要实现计算器的功能，每个按钮都需要添加事件--->onclick()当鼠标点击时触发， 所有的数字和运算符都要使用onclick触发，等于号和c(清空键)较为特殊，他们需要对应与数字和普通运算符不同的事件：计算结果和清空输入。以及最上方的显示块需要时刻与输入的内容对应也是不同的事件。
运算的过程较为简单，只使用了eval()函数进行计算。
最后就是对计算器输入过程的修饰，计算过程不能出现数字后跟多个运算符的情况，如5++或5+-*/，这样会导致eval()函数无法正常计算，所以需要对输入时的事件进行休整。
二、源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table {
border: 10px;
margin: auto;
}
td {
border: 2px solid black; //单元格边框
text-align: center;
/*单元格内容居中*/
padding: 20px;
/*内边距*/
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" id="result"></td>
</tr>
<tr>
<td onclick="appendresult('7')">7</td>
<td onclick="appendresult('8')">8</td>
<td onclick="appendresult('9')">9</td>
<td onclick="appendresult('+')">+</td>
</tr>
<tr>
<td onclick="appendresult('4')">4</td>
<td onclick="appendresult('5')">5</td>
<td onclick="appendresult('6')">6</td>
<td onclick="appendresult('-')">-</td>
</tr>
<tr>
<td onclick="appendresult('1')">1</td>
<td onclick="appendresult('2')">2</td>
<td onclick="appendresult('3')">3</td>
<td onclick="appendresult('*')">*</td>
</tr>
<tr>
<td onclick="appendresult('0')">0</td>
<td id="clear" onclick="clearall()">c</td>
<td onclick="caculate()">=</td>
<td onclick="appendresult('/')">/</td>
</tr>
</table>
</body>
<script>
var inputment = ""; //输入的内容
function appendresult(value) {
// 判断value是数字还是符号
if (value == "+" || value == "-" || value == "*" || value == "/") {
// 检查最后一个字符是否为运算符
if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||
inputment[inputment.length - 1] == "-" ||
inputment[inputment.length - 1] == "*" ||
inputment[inputment.length - 1] == "/")) {
return; // 如果是运算符，则不添加新的运算符，return不进行任何操作
}
inputment += value; // 添加新的运算符
} else {
// 如果是数字，直接添加
inputment += value;
}
update();
}
function caculate() {
var result = eval(inputment);
inputment = result.toString(); //更新全局变量
update();
}
function update() {
document.getElementById("result").innerText = inputment || "0";
}
function clearall() {
document.getElementById("result").innerText = "";
inputment = "";
}
</script>
</html>三、结果展示
可以看到不会出现多个运算符重复出现的错误。
四、不足与改进
在制作此计算器时，用的是表格来表示计算器，没有考虑到点击形式的问题，使得在使用时鼠标全程是I的状态，不是点击状态，用起来十分别扭，除了将整个表格变成<input>中的按钮状态外，有更便捷的方法来解决：
可以在td的类选择器中添加
cursor: pointer; /* 鼠标悬停时显示手型光标 */
为了使用时更加便捷，还可以使用伪类添加鼠标悬停时的背景色以及点击时的背景色：
td:hover { background-color: #f0f0f0; /* 鼠标悬停时的背景色 */ }
td:active { background-color: #d0d0d0; /* 点击时的背景色 */ }
最后的效果：
此时的鼠标放在了数字7上，并且是点击态，再点击后颜色会加深一点。
改进后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table {
border: 10px;
margin: auto;
}
td {
border: 2px solid black; //单元格边框
text-align: center;
/*单元格内容居中*/
padding: 20px;
/*内边距*/
cursor: pointer;
/* 鼠标悬停时显示手型光标 */
}
td:hover {
background-color: #f0f0f0;
/* 鼠标悬停时的背景色 */
}
td:active {
background-color: #d0d0d0;
/* 点击时的背景色 */
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" id="result"></td>
</tr>
<tr>
<td onclick="appendresult('7')">7</td>
<td onclick="appendresult('8')">8</td>
<td onclick="appendresult('9')">9</td>
<td onclick="appendresult('+')">+</td>
</tr>
<tr>
<td onclick="appendresult('4')">4</td>
<td onclick="appendresult('5')">5</td>
<td onclick="appendresult('6')">6</td>
<td onclick="appendresult('-')">-</td>
</tr>
<tr>
<td onclick="appendresult('1')">1</td>
<td onclick="appendresult('2')">2</td>
<td onclick="appendresult('3')">3</td>
<td onclick="appendresult('*')">*</td>
</tr>
<tr>
<td onclick="appendresult('0')">0</td>
<td id="clear" onclick="clearall()">c</td>
<td onclick="caculate()">=</td>
<td onclick="appendresult('/')">/</td>
</tr>
</table>
</body>
<script>
var inputment = ""; //输入的内容
function appendresult(value) {
// 判断value是数字还是符号
if (value == "+" || value == "-" || value == "*" || value == "/") {
// 检查最后一个字符是否为运算符
if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||
inputment[inputment.length - 1] == "-" ||
inputment[inputment.length - 1] == "*" ||
inputment[inputment.length - 1] == "/")) {
return; // 如果是运算符，则不添加新的运算符，return不进行任何操作
}
inputment += value; // 添加新的运算符
} else {
// 如果是数字，直接添加
inputment += value;
}
update();
}
function caculate() {
var result = eval(inputment);
inputment = result.toString(); //更新全局变量
update();
}
function update() {
document.getElementById("result").innerText = inputment || "0";
}
function clearall() {
document.getElementById("result").innerText = "";
inputment = "";
}
</script>
</html>
![【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 团队关系判定(100分) - 三语言AC题解(Python/Java/Cpp)](https://i-blog.csdnimg.cn/direct/2da7f0b47d6542d592eea36f3abced8d.png)
![二十天刷leetcode【hot100】算法- day1[前端Typescript]](https://i-blog.csdnimg.cn/direct/b29627bfecd4411ca4fe32acae9b0e72.png)
