AI应用实践:制作一个支持超长计算公式的计算器,计算内容只包含加减乘除算法,保存在一个HTML文件中

张开发
2026/4/16 9:24:34 15 分钟阅读

分享文章

AI应用实践:制作一个支持超长计算公式的计算器,计算内容只包含加减乘除算法,保存在一个HTML文件中
通过AI大模型一句话生成本地单机版web应用小工具。AI应用实践制作一个支持超长计算公式的计算器计算内容只包含加减乘除算法保存在一个HTML文件中成品地址超长公式计算器 讯飞星火以下代码保存在文本中另存为 *.html 文件即可在本地浏览器运行。!DOCTYPE htmlhtmlheadtitle超长四则运算计算器/titlestyle#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/headbodydiv idcalculatorinput typetext iddisplay readonlydiv classbuttonsbutton onclickappendToDisplay(7)7/buttonbutton onclickappendToDisplay(8)8/buttonbutton onclickappendToDisplay(9)9/buttonbutton onclickappendToDisplay(/)//buttonbutton onclickappendToDisplay(4)4/buttonbutton onclickappendToDisplay(5)5/buttonbutton onclickappendToDisplay(6)6/buttonbutton onclickappendToDisplay(*)×/buttonbutton onclickappendToDisplay(1)1/buttonbutton onclickappendToDisplay(2)2/buttonbutton onclickappendToDisplay(3)3/buttonbutton onclickappendToDisplay(-)-/buttonbutton onclickappendToDisplay(0)0/buttonbutton onclickappendToDisplay(.)./buttonbutton onclickclearDisplay()C/buttonbutton onclickappendToDisplay()/buttonbutton onclickappendToDisplay(()(/buttonbutton onclickappendToDisplay()))/buttonbutton onclickcalculate()/button/div/divscriptfunction 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主要功能特点界面设计响应式布局适配不同屏幕尺寸清晰的数字和运算符按钮布局实时显示输入表达式错误提示机制核心算法支持括号嵌套运算遵循运算符优先级规则先乘除后加减支持连续运算如 1234自动处理小数运算输入过滤非法字符实现原理使用逆波兰表达式算法处理运算顺序分阶段解析表达式处理括号内的子表达式按运算符优先级逐步计算最终计算结果安全机制输入过滤仅允许数字、运算符和括号除零错误检测异常捕获处理使用说明输入数字和运算符支持 - * /使用括号改变运算顺序点击号显示计算结果C按钮清空输入支持连续输入如 12 * 34/2该计算器能够处理包含数百字符的超长表达式通过分阶段解析和运算符优先级处理确保计算准确性。所有功能均集成在单个HTML文件中无需外部依赖即可运行。

更多文章