HTMLJS实现简单计算器代码

2、在容器内添加一个<input type="text">元素作为显示屏，设置readonly属性防止用户直接输入，并赋予id="display"以便JS访问。

3、依次添加数字按钮（0–9）、运算符按钮（+、−、×、÷）、等号按钮（=）、清除按钮（C）、小数点按钮（.）以及删除单个字符按钮（←），每个按钮均设置value属性和对应的文本内容。

4、为所有按钮统一添加class="btn"，为运算符按钮额外添加class="operator"，为等号按钮添加class="equals"，为清除按钮添加class="clear"。

二、编写JavaScript计算逻辑

JavaScript部分负责响应用户点击操作、解析表达式并执行计算。需避免直接使用eval()处理复杂表达式，改用分步解析方式提升安全性与可控性。

1、通过document.getElementById("display")获取显示屏元素，保存为变量display。

2、为每个按钮绑定click事件监听器，使用事件委托或遍历button集合方式统一处理。

3、当点击数字或小数点时，将对应字符追加到display.value末尾；若当前显示为"0"且点击非小数点，则先清空再写入新数字。

4、当点击运算符时，检查上一次输入是否为运算符，若是则替换而非追加；否则将当前显示内容存入firstOperand变量，并记录当前运算符operator，清空显示屏准备输入第二操作数。

5、当点击等号时，读取display.value作为secondOperand，调用calculate(firstOperand, secondOperand, operator)函数执行运算，结果写入display.value，并重置firstOperand与operator。

三、实现安全的四则运算函数

为避免浮点数精度误差及除零异常，需单独封装计算函数，对输入做类型转换与边界判断，确保输出符合数学预期。

1、定义function calculate(a, b, op) { a = parseFloat(a); b = parseFloat(b); }。

2、使用switch语句匹配op值：case '+' 返回 a + b；case '−' 返回 a − b；case '×' 返回 a * b；case '÷' 判断b是否为0，若b为0则返回"Error"，否则返回 a / b。

3、对结果调用parseFloat().toFixed(10).replace(/\.?0+$/, '')去除冗余小数位，再转为字符串返回。

4、在函数末尾对结果执行isNaN()检测，若为NaN则返回"Error"。

四、添加键盘事件支持

使计算器支持物理键盘输入，提升交互完整性。需监听document的keydown事件，将按键映射为对应按钮行为，同时防止默认表单提交等干扰。

1、为document添加keydown事件监听器，使用e.key获取按键值。

2、将数字键'0'–'9'、小数点'.'、加减乘除符号'+', '-', '*', '/'、回车'Enter'、Escape'Escape'分别映射至对应按钮逻辑。

3、在处理前调用e.preventDefault()，避免按Enter触发页面刷新或表单提交。

4、对乘号'*'和除号'/'按键，将其转换为界面上显示的'×'和'÷'后再执行插入或运算符存储逻辑。

五、处理连续运算与表达式链式计算

支持如"2+3×4"类混合运算需引入简单优先级解析，或采用“每次输入运算符即立即执行上一步”的即时计算模式，降低逻辑复杂度。

1、设定状态变量waitingForSecondOperand = false，初始为true表示等待第二操作数。

2、当已存在firstOperand且未点击等号时，再次点击运算符即触发即时计算：以firstOperand和当前display.value执行calculate，结果存回firstOperand，display.value更新为结果，operator更新为新运算符。

3、点击等号后，若display.value非空且waitingForSecondOperand为false，则再执行一次calculate并将结果赋给display.value，随后重置firstOperand与operator。

4、点击清除按钮（C）时，将display.value设为"0"，firstOperand、operator、waitingForSecondOperand全部重置为初始值。

好了，本文到此结束，带大家了解了《HTMLJS实现简单计算器代码》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！