Calculadora - CSS

Calculadora-CSS 是一个使用纯 CSS 制作的漂亮计算器。它不需要使用 JavaScript，只需要简单的 HTML 和 CSS 即可创建一个漂亮的计算器。

功能

• 基本数学运算：加、减、乘、除
• 零宽度空格可以用来对数学运算符进行对齐
• 对数学表达式进行解析和计算，支持表达式嵌套
• 点击数字和操作符可以实时显示计算结果

使用方法

要使用 Calculadora-CSS，只需要包含以下代码：

<div class="calculator">
  <div class="display"></div>
  <div class="buttons">
    <button class="operator" value="+">&#43;</button>
    <button class="operator" value="-">&#45;</button>
    <button class="operator" value="*">&#215;</button>
    <button class="operator" value="/">&#247;</button>
    <button class="number" value="7">7</button>
    <button class="number" value="8">8</button>
    <button class="number" value="9">9</button>
    <button class="operator" value="">&#8203;</button>
    <button class="number" value="4">4</button>
    <button class="number" value="5">5</button>
    <button class="number" value="6">6</button>
    <button class="operator" value="">&#8203;</button>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="clear" value="clear">C</button>
    <button class="number" value="0">0</button>
    <button class="operator equal" value="=">&#61;</button>
  </div>
</div>

并包含以下 CSS：

.calculator {
  width: 240px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #333;
}

.display {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: right;
  font-size: 24px;
  color: white;
  background-color: #555;
}

.buttons {
  width: 100%;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  padding: 10px;
}

button {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: #666;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.operator {
  background-color: #999;
}

.clear {
  width: 105px;
}

.equal {
  background-color: #f90;
}

button:hover {
  background-color: #777;
}

这段 HTML 和 CSS 代码将会呈现一个漂亮的计算器。

实现细节

Calculadora-CSS 是一个使用纯 CSS 实现的计算器。我们使用 CSS 的 flexbox 布局来排列按钮。

我们使用过零宽度空格字符（U+8203）在数学运算符左右两边进行对齐，整个计算器看起来更加整洁。

我们使用 CSS 的 :not 选择器来选中所有数字或运算符按钮。我们使用 JavaScript 将按钮的值插入到计算器上，也是因为不能使用 CSS 'content' 属性动态插入值。

为了计算表达式，我们使用 CSS 中的 calc() 函数进行编写，不过该函数还存在一些 bug，例如不能正确处理括号，嵌套表达式等情况。

结论

计算器是一个非常常见的应用程序。使用纯 CSS 实现一个漂亮的计算器是有趣的事情，它给了我们一个了解如何使用 CSS 的机会。不过，在实践中，我们还是更喜欢使用 JavaScript 进行计算器的实现。