AI应用实践：制作一个支持超长计算公式的计算器，计算内容只包含加减乘除算法，保存在一个HTML文件中
成品地址：https://www.aibxm.com/jsq.html
<!DOCTYPE html>
<html>
<head>
<title>超长四则运算计算器</title>
<style>
#calculator {
width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px #eee;
}
#display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
button {
padding: 15px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">×</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('(')">(</button>
<button onclick="appendToDisplay(')')">)</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
const expression = document.getElementById('display').value;
const sanitized = expression.replace(/[^0-9+\-*/().]/g, ''); // 过滤非法字符
const result = evaluateExpression(sanitized);
document.getElementById('display').value = result;
} catch (e) {
alert("错误: " + e.message);
clearDisplay();
}
}
function evaluateExpression(expr) {
// 处理括号
while (expr.includes('(')) {
expr = expr.replace(/$([^()]+)$/g, (_, group) => evaluateSimpleExpression(group));
}
return evaluateSimpleExpression(expr);
}
function evaluateSimpleExpression(expr) {
// 处理运算符优先级
const operators = [];
const operands = [];
let currentNumber = '';
for (const char of expr) {
if (!isNaN(char) || char === '.') {
currentNumber += char;
} else {
if (currentNumber) {
operands.push(parseFloat(currentNumber));
currentNumber = '';
}
while (operators.length > 0 &&
precedence(operators[operators.length - 1]) >= precedence(char)) {
applyOperation(operands, operators);
}
operators.push(char);
}
}
if (currentNumber) operands.push(parseFloat(currentNumber));
while (operators.length > 0) {
applyOperation(operands, operators);
}
return operands.pop();
}
function precedence(op) {
if (op === '+' || op === '-') return 1;
if (op === '*' || op === '/') return 2;
return 0;
}
function applyOperation(operands, operators) {
const b = operands.pop();
const a = operands.pop();
const op = operators.pop();
switch(op) {
case '+': operands.push(a + b); break;
case '-': operands.push(a - b); break;
case '*': operands.push(a * b); break;
case '/':
if (b === 0) throw new Error("除数不能为零");
operands.push(a / b);
break;
default: throw new Error("未知运算符");
}
}
</script>
</body>
</html>
主要功能特点：
界面设计
响应式布局，适配不同屏幕尺寸
清晰的数字和运算符按钮布局
实时显示输入表达式
错误提示机制
核心算法
支持括号嵌套运算
遵循运算符优先级规则（先乘除后加减）
支持连续运算（如 1+2+3+4）
自动处理小数运算
输入过滤非法字符
实现原理
使用逆波兰表达式算法处理运算顺序
分阶段解析表达式：
处理括号内的子表达式
按运算符优先级逐步计算
最终计算结果
安全机制
输入过滤（仅允许数字、运算符和括号）
除零错误检测
异常捕获处理
使用说明：
输入数字和运算符（支持+ - * /）
使用括号改变运算顺序
点击=号显示计算结果
C按钮清空输入
支持连续输入（如 1+2 * 3+4/2）
该计算器能够处理包含数百字符的超长表达式，通过分阶段解析和运算符优先级处理确保计算准确性。所有功能均集成在单个HTML文件中，无需外部依赖即可运行。
登录后可发表评论
点击登录