目录
- 一、介绍
- 二、准备
- 三、目标
- 四、代码
- 五、完成
一、介绍
古以算盘作为计算工具。算盘常为木制矩框，内嵌珠子数串，定位拨珠，可做加减乘除等运算。站在前人的肩膀上，后人研究出计算器，便利了大家的生活，我们不用带着笨重的计算工具出门，打开手机上的计算器就可以了。
本题需要实现一个可以进行加减乘除等运算的计算器。
二、准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── css
│ └── style.css
├── js
│ └── index.js
├── effect.gif
└── index.html
其中：
- css/style.css 是样式文件。
- js/index.js 是实现计算功能的 js 文件。
- effect.gif 是最终实现的效果动图。
- index.html 是主页面。
在浏览器中预览 index.html 页面，点击计算器上的按钮，不能进行计算（图上的红色文字只是对计算器的功能区域进行说明，无需实现），效果如下：
三、目标
请完善 js/index.js 文件，当鼠标点击计算器上的按钮时，能够正常进行计算。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
具体说明如下：
- 点击按钮会在计算式子区域显示当前输入的计算式子，当点击等号（=） 后，在结果显示区域应该显示出正确的结果。
- 计算器需要具有加（+）、减（-）、乘（x）、除（÷）、开二次方（√）、重置（AC）、小数点（.）、括号运算这八个功能。
- 计算器的计算遵循四则混合运算的法则，括号的优先级最高，其次是乘除，加减的优先级最低。
效果说明如下：
能够正确进行加、减、乘、除的混合运算，样例如下所示：
- 能够正确进行开二次方，输入一个可以平方的数，点击开方（√）按钮即可在结果显示区域显示结果。如果输入的值是不能平方，结果显示 NaN，样例如下所示：
-
点击重置按钮（AC），可以清空计算式子显示区域和结果显示区域的值。
-
能够进行小数的加减乘除运算，样例如下所示：
-
四、代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用什么来做计算</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="calculator">
<!--结果-->
<div class="calc-row">
<input type="text" name="formula" id="formula" readonly />
<input type="text" name="result" id="result" readonly />
</div>
<!--第一行-->
<div class="calc-row">
<div class="calc-button" id="left-bracket">(</div>
<div class="calc-button" id="right-bracket">)</div>
<div class="calc-button" id="sqrt">√</div>
<div class="calc-button" id="reset">AC</div>
</div>
<!--第二行-->
<div class="calc-row">
<div class="calc-button" id="seven">7</div>
<div class="calc-button" id="eight">8</div>
<div class="calc-button" id="nine">9</div>
<div class="calc-button" id="division">÷</div>
</div>
<!--第三行-->
<div class="calc-row">
<div class="calc-button" id="four">4</div>
<div class="calc-button" id="five">5</div>
<div class="calc-button" id="six">6</div>
<div class="calc-button" id="multiply">x</div>
</div>
<!--第四行-->
<div class="calc-row">
<div class="calc-button" id="one">1</div>
<div class="calc-button" id="two">2</div>
<div class="calc-button" id="three">3</div>
<div class="calc-button" id="reduce">-</div>
</div>
<!--第五行-->
<div class="calc-row">
<div class="calc-button" id="zero">0</div>
<div class="calc-button" id="decimal">.</div>
<div class="calc-button" id="equal">=</div>
<div class="calc-button" id="add">+</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
css/style.css
/*整个计算器的外观*/
.calculator {
position: relative;
width: 300px;
margin: 1px auto;
padding: 10px 0;
cursor: pointer;
border-radius: 20px;
background-color: #6fb2d2;
box-shadow: 5px 5px 10px 3px #908e8e;
}
.calc-row {
text-align: center;
}
/*结果显示屏*/
input {
margin: 0 10px;
width: 85%;
color: #000;
text-align: right;
font-size: 30px;
margin-left: 10px;
padding-right: 0.5em;
border: 1px solid #f0e4d7;
background-color: #f2ece6;
}
.calc-row #result {
height: 40px;
border-radius: 0 0 10px 10px;
}
.calc-row #formula {
height: 30px;
border-radius: 10px 10px 0 0;
}
.calc-row div {
display: inline-block;
text-align: center;
font-weight: bold;
width: 50px;
border: 1px solid #555;
background-color: #eee;
padding: 10px 0;
margin: 7px 5px;
border-radius: 15px;
box-shadow: 2px 2px 1px 1px #222;
}
js/index.js
//TODO
五、完成
js/index.js
// TODO：请补充代码
const calculator = document.getElementsByClassName('calculator')[0]
const formula = document.getElementById('formula')
const result = document.getElementById('result')
let str = ''
calculator.addEventListener('click', function (e) {
//记录当前按的是什么东西
const indexValue = e.target.innerHTML
//防止点击的不是计算机按钮
if (indexValue.length > 2) {
return
}
//如果按的是根号
if (indexValue === '√') {
result.value = Math.sqrt(formula.value);
}
//如果按的是AC
else if (indexValue === 'AC') {
formula.value = '';
result.value = '';
}
//如果按的是等号
else if (indexValue === '=') {
result.value = eval(formula.value.replaceAll(/[÷]/g, '/').replaceAll(/[x]/g, "*"));
}
//说明在输入表达式
else {
formula.value += indexValue;
}
})
