css写苹果计算器

苹果计算器是一个经典的iOS应用程序，它拥有简单明了的界面和强大的计算功能。我们可以使用HTML、CSS和JavaScript来构建自己的版本。

css写苹果计算器

首先，我们需要创建一个HTML骨架，并在其中插入我们的按钮和显示区域。以下是一段基本的HTML代码：

<div class="calculator">
  <div class="display"></div>
  <button class="number-btn">0</button>
  <button class="number-btn">1</button>
  <button class="number-btn">2</button>
  <button class="operator-btn">+</button>
  <button class="number-btn">3</button>
  <button class="number-btn">4</button>
  <button class="number-btn">5</button>
  <button class="operator-btn">-</button>
  <button class="number-btn">6</button>
  <button class="number-btn">7</button>
  <button class="number-btn">8</button>
  <button class="operator-btn">x</button>
  <button class="number-btn">9</button>
  <button class="clear-btn">C</button>
  <button class="equal-btn">=</button>
  <button class="operator-btn">/</button>
</div>

接下来，我们需要添加CSS样式来定义我们的按钮和显示区域的外观。这里是样式表：

.calculator {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid grey;
  border-radius: 10px;
}

.display {
  grid-column: 1 / span 4;
  height: 50px;
  font-size: 2em;
  text-align: right;
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
}

.number-btn {
  height: 50px;
  font-size: 2em;
  text-align: center;
  background-color: #f4f4f4;
  border-radius: 10px;
}

.operator-btn {
  height: 50px;
  font-size: 2em;
  text-align: center;
  background-color: #f7b731;
  border: none;
  border-radius: 10px;
  color: white;
}

.clear-btn {
  height: 50px;
  font-size: 2em;
  text-align: center;
  background-color: #e74c3c;
  border: none;
  border-radius: 10px;
  color: white;
}

.equal-btn {
  height: 50px;
  font-size: 2em;
  text-align: center;
  background-color: #2ecc71;
  border: none;
  border-radius: 10px;
  color: white;
}

最后，我们需要添加一些JavaScript代码来处理按钮的点击事件并在我们的显示区域中显示结果。以下是一个简单的示例：

let display = document.querySelector('.display');
let buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click',() => {
    if (button.classList.contains('number-btn')) {
      display.textContent += button.textContent;
    } else if (button.classList.contains('operator-btn')) {
      display.textContent += ' ' + button.textContent + ' ';
    } else if (button.classList.contains('clear-btn')) {
      display.textContent = '';
    } else if (button.classList.contains('equal-btn')) {
      let result = eval(display.textContent);
      display.textContent = result;
    }
  });
});

这就是使用CSS构建苹果计算器的基本过程。我们可以根据自己的喜好添加其他功能，例如：小数点、括号、指数、三角函数、记忆存储等。希望这个简单的示例可以给大家提供一些有用的参考。

相关推荐