计算器是各个领域中使用的必备工具，从简单的算术计算到复杂的科学计算。使用 HTML、CSS 和 JavaScript 从头开始​​构建计算器不仅可以增强您的编码技能，还可以加深您对这些技术如何协同工作的理解。本指南将引导您创建一个可以执行加法、减法、乘法和除法的基本计算器。

HTML 结构：
HTML 包含一个带有类计算器的 div，其中包含计算器的显示屏和按钮。
每个按钮都有数据属性（用于数字的 data-num 和用于操作的 data-op），以便于 JavaScript 选择。
CSS 样式：
CSS 样式使计算器在屏幕上居中，设置显示和按钮的样式，并提供悬停效果。
为等于按钮添加了特定样式以区别于其他按钮。
JavaScript 功能：
JavaScript 处理按钮点击、更新显示并执行计算。
handleNumber 函数处理数字输入和小数点。
handleOperator 函数处理操作，包括清除、等于和算术运算。
计算函数根据所选运算符执行算术运算。
updateDisplay 函数用当前输入更新显示。