这是一个基于原生 HTML5 + CSS3 + JavaScript (ES6) 构建的现代化网页计算器。它采用了时下流行的毛玻璃(Glassmorphism)设计风格,并内置了本地存储功能,可以在浏览器中长久保存你的计算历史记录。
🌐 在线体验地址:https://wuwang660.github.io/Simple-JavaScript-Calculator/
- 基础运算:支持加减乘除(
+、-、×、÷)以及百分比(%)计算。 - 高精度修正:内置了
precise()防浮点误差方法,完美解决0.1 + 0.2 = 0.30000000000000004等常见编程问题。 - 本地历史记录:计算结果会自动保存在浏览器的
localStorage中。关闭或刷新页面后,历史数据依然存在,支持一键清空。 - 双模式交互:既可以通过鼠标点击屏幕按钮,也完美支持键盘直接输入。
- 细腻的交互反馈:按钮具有悬停上浮效果和点击动画(
@keyframes animate),操作手感流畅。
为了提升操作效率,计算器支持以下快捷键:
| 键盘按键 | 功能描述 |
|---|---|
| 数字键 (0-9) 及 小数点 (.) | 输入数字 |
+ - * / |
输入运算符 (注:实际显示为 × 和 ÷) |
Enter (回车键) |
执行运算并显示结果 |
Backspace (退格键) |
删除输入框最后一个字符 |
Escape (ESC键) |
一键清空当前输入内容 |
计算器项目/
├── index.html # 页面结构
├── calculator.css # 样式布局
├── calculator.js # 核心逻辑
└── icons/ # 存放按钮图标的文件夹
├── 最近使用.png # 历史记录按钮图标
└── 清空.png # 清空历史按钮图标