css计算器代码

以下是一个简单的 CSS 计算器代码，它可以执行加、减、乘和除操作：

HTML 代码：

<div class="calculator">
  <input type="text" class="input" placeholder="0">
  <button class="operator" value="+">+</button>
  <button class="operator" value="-">-</button>
  <button class="operator" value="*">*</button>
  <button class="operator" value="/">/</button>
  <button class="clear">C</button>
  <button class="equals">=</button>
</div>

CSS 代码：

.calculator {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 0 auto;
}

.input {
  flex: 2;
  margin-right: 10px;
  padding: 10px;
  font-size: 20px;
}

.operator {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  font-size: 20px;
  background-color: #eee;
  border: none;
  cursor: pointer;
}

.clear {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  font-size: 20px;
  background-color: #f00;
  color: #fff;
  border: none;
  cursor: pointer;
}

.equals {
  flex: 1;
  padding: 10px;
  font-size: 20px;
  background-color: #0f0;
  color: #fff;
  border: none;
  cursor: pointer;
}

.operator:hover, .clear:hover, .equals:hover {
  background-color: #ccc;
}

.operator:active, .clear:active, .equals:active {
  background-color: #aaa;
}

JavaScript 代码：

const input = document.querySelector('.input');
const operators = document.querySelectorAll('.operator');
const clear = document.querySelector('.clear');
const equals = document.querySelector('.equals');

let firstNumber = '';
let secondNumber = '';
let currentOperator = null;
let shouldClearInput = false;

function clearAll() {
  firstNumber = '';
  secondNumber = '';
  currentOperator = null;
  shouldClearInput = false;
  input.value = '';
}

function calculate() {
  const first = parseFloat(firstNumber);
  const second = parseFloat(secondNumber);
  switch (currentOperator) {
    case '+':
      input.value = first + second;
      break;
    case '-':
      input.value = first - second;
      break;
    case '*':
      input.value = first * second;
      break;
    case '/':
      input.value = first / second;
      break;
  }
  firstNumber = input.value;
  secondNumber = '';
  currentOperator = null;
  shouldClearInput = true;
}

function handleOperator(operator) {
  if (currentOperator !== null) {
    calculate();
  }
  currentOperator = operator;
  firstNumber = input.value;
  shouldClearInput = true;
}

function handleNumber(number) {
  if (shouldClearInput) {
    input.value = '';
    shouldClearInput = false;
  }
  input.value += number;
  if (currentOperator === null) {
    firstNumber = input.value;
  } else {
    secondNumber = input.value;
  }
}

operators.forEach(operator => {
  operator.addEventListener('click', () => handleOperator(operator.value));
});

clear.addEventListener('click', clearAll);

equals.addEventListener('click', calculate);

for (let i = 0; i <= 9; i++) {
  document.querySelector(`.number-${i}`).addEventListener('click', () => handleNumber(i));
}