基于原生html、css、js实现计算器功能
此计算器实现了数字输入、基本运算符处理、结果显示、清除操作、以及二进制与十进制的相互转换、撤回功能在这里插入代码片
效果图:
样式:用到了bootstrap在这里插入代码片
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二进制计算器</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<table class="table table-borderless">
<tbody>
<tr>
<td colspan="4" class="text-right result" id="display"></td>
</tr>
<tr>
<td><button class="btn btn-primary button myButtonSwitch">二</button></td>
<td><button class="btn btn-primary button myButtonSwitch1">十</button></td>
<td><button class="btn btn-primary button myButtonBracket">X</button></td>
<td><button class="btn btn-secondary button myButtonClear">C</button></td>
</tr>
<tr>
<td><button class="btn btn-primary button myButtonNum">7</button></td>
<td><button class="btn btn-primary button myButtonNum">8</button></td>
<td><button class="btn btn-primary button myButtonNum">9</button></td>
<td><button class="btn btn-secondary button myButtonSign">/</button></td>
</tr>
<tr>
<td><button class="btn btn-primary button myButtonNum">4</button></td>
<td><button class="btn btn-primary button myButtonNum">5</button></td>
<td><button class="btn btn-primary button myButtonNum">6</button></td>
<td><button class="btn btn-secondary button myButtonSign">*</button></td>
</tr>
<tr>
<td><button class="btn btn-primary button myButtonNum">1</button></td>
<td><button class="btn btn-primary button myButtonNum">2</button></td>
<td><button class="btn btn-primary button myButtonNum">3</button></td>
<td><button class="btn btn-secondary button myButtonSign">-</button></td>
</tr>
<tr>
<td><button class="btn btn-primary button myButtonNum">0</button></td>
<td><button class="btn btn-primary button myButtonNum">.</button></td>
<td><button class="btn btn-secondary button myButtonSign">+</button></td>
<td><button class="btn btn-success button myButtonSum">=</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
js部分
let operands = []; // 用于存储操作数的数组
let operators = []; // 用于存储运算符的数组
let currentOperand = ''; // 当前正在输入的操作数
let currentSumSign = ''; // 当前正在输入的操作运算符
let displayValue = ''; // 用于显示当前输入值的变量
let prints = []; //创建输入结果的数组
let switchNum = ''
let switchNum1 = ''
// 更新显示的值
function updateDisplay() {
document.querySelector('.result').innerText = displayValue || '0';
}
// 为数字按钮添加点击事件监听器
document.querySelectorAll('.myButtonNum').forEach(function (button) {
button.addEventListener('click', function (event) {
event.preventDefault();
currentOperand += button.innerText; // 累加数字到当前操作数
prints.push(currentOperand);
currentOperand = ''
displayValue += prints.join('');
prints = []
updateDisplay(); // 更新显示
});
});
// 为运算符按钮添加点击事件监听器
document.querySelectorAll('.myButtonSign').forEach(function (button) {
button.addEventListener('click', function (event) {
event.preventDefault();
if (currentOperand) { // 如果有正在输入的操作数,则将其加入数组
operands.push(parseFloat(currentOperand));
currentOperand = ''; // 重置当前操作数
}
currentSumSign = button.innerText;
operators.push(currentSumSign); // 添加运算符到数组
currentSumSign = ''
prints.push(button.innerText)
displayValue += prints.join('')
prints = []
updateDisplay();
});
});
// 为等于号按钮添加点击事件监听器,执行计算逻辑
document.querySelector('.myButtonSum').addEventListener('click', function (event) {
event.preventDefault();
// 显示最终结果
let result = eval(displayValue);
// 重置数组和变量以便下一次计算
operands = [];
operators = [];
displayValue = result.toString();// 以字符串的形式返回其内容
updateDisplay();
});
// 为清除按钮添加点击事件监听器
document.querySelector('.myButtonClear').addEventListener('click', function (event) {
event.preventDefault();
operands = [];
operators = [];
currentOperand = '';
displayValue = '';
prints = [];
document.querySelector('.result').innerText = displayValue;
});
// 二进制转十进制
document.querySelector('.myButtonSwitch').addEventListener('click', function (event) {
event.preventDefault();
if (displayValue) {
switchNum = parseInt(displayValue, 2)
displayValue = switchNum;
updateDisplay();
switchNum = ''
}
})
// 十进制转二进制
document.querySelector('.myButtonSwitch1').addEventListener('click', function (event) {
event.preventDefault();
if (displayValue) {
switchNum1 = parseInt(displayValue).toString(2)
displayValue = switchNum1;
updateDisplay();
switchNum1 = ''
}
})
document.querySelector('.myButtonBracket').addEventListener('click', function (event) {
event.preventDefault();
// 直接修改字符串为新字符串,直至为空
displayValue = displayValue.slice(0, -1);
updateDisplay();
})
window.addEventListener('error', function(event) {
// event.error 可能包含错误对象,但不是所有浏览器都支持
// 因此通常使用 event.message 来获取错误信息
var errorMessage = event.message;
alert('请注意输入格式!');
// 防止控制台默认的错误处理(如果你不希望它出现的话)
// 注意:在实际开发中可能需要权衡是否阻止默认行为
// return false 或者 event.preventDefault() 可能不会在所有浏览器中按预期工作
// event.preventDefault();
}, true); // true 表示在捕获阶段处理事件,有助于尽早捕获错误
// 故意引发一个错误以测试弹框
// generateError();
CSS部分
.button {
width: 100%;
}
.result {
background-color: #eee;
}
代码思路:
- 创建一个数组
operands
用于存储操作数,一个数组operators
用于存储运算符。 - 创建一个变量
currentOperand
用于存储当前正在输入的操作数,一个变量currentSumSign
用于存储当前正在输入的操作运算符。 - 创建一个变量
displayValue
用于显示当前输入的值。 - 创建一个数组
prints
用于创建输入结果的数组。 - 创建一个变量
switchNum
用于存储二进制转十进制的结果。
下面是该代码的主要逻辑流程和功能点的总结,以及一个简化的流程图说明。
代码逻辑与功能点总结:
-
初始化: 定义了多个变量和数组,用于存储操作数、运算符、当前输入值、显示内容及历史输入记录。
-
更新显示:
updateDisplay
函数用于更新页面上显示的结果区域,展示displayValue
的内容。 -
数字按钮处理: 当数字按钮被点击时,将点击的数字累加到
currentOperand
,并更新显示。同时清空prints
数组,重新构建显示内容。 -
运算符按钮处理: 点击运算符按钮时,将当前
currentOperand
推入operands
数组,并将运算符推入operators
数组,然后更新显示为所选运算符。 -
等于号处理: 点击等于号时,理论上应该遍历
operands
和operators
数组执行相应的计算(注释部分未启用),这里直接使用eval
函数计算displayValue
的值,然后清空相关数组和变量,显示计算结果。 -
清除功能: 清除按钮会重置所有的状态,准备下一轮计算。
-
二进制与十进制转换:
- 点击二进制转十进制按钮,尝试将当前显示的值作为二进制数转换为十进制并显示。
- 点击十进制转二进制按钮,尝试将当前显示的值作为十进制数转换为二进制并显示。
-
括号处理: 提供了一个点击事件监听器,但未完成具体逻辑,似乎是为了删除最后一个字符(可能用于括号处理或输入修正)。
-
错误处理: 添加了全局错误监听器,在发生JavaScript错误时弹出提示信息,避免控制台直接显示技术性错误信息给用户。
流程图简化描述:
开始 -> 初始化变量和数组
|
V
用户操作 ->
| 数字按钮点击 -> 更新currentOperand & 显示
| |
| V
| 运算符按钮点击 -> 保存运算符 & 显示运算符
| |
| V
| 等于号点击 -> 使用eval计算displayValue & 显示结果
| |
| V
| 清除按钮点击 -> 重置所有状态
| |
| V
| 二进制转十进制按钮 -> 转换并显示
| |
| V
| 十进制转二进制按钮 -> 转换并显示
|
V
错误监听 -> 弹窗提示错误信息
|
V
结束