用css html js 写一个计算器，要有1-9和加减等功能

下面是一个简单的 HTML、CSS 和 JavaScript 计算器：

HTML 代码：

<div class="calculator">
  <input type="text" class="input" placeholder="0">
  <button class="number" value="1">1</button>
  <button class="number" value="2">2</button>
  <button class="number" value="3">3</button>
  <button class="operator" value="+">+</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="-">-</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="*">*</button>
  <button class="clear">C</button>
  <button class="number" value="0">0</button>
  <button class="operator" value="/">/</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;
}

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

.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;
}

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

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

JavaScript 代码：

const input = document.querySelector('.input');
const numbers = document.querySelectorAll('.number');
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;
  }
}

numbers.forEach(number => {
  number.addEventListener('click', () => handleNumber(number.value));
});

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

clear.addEventListener('click', clearAll);

equals.addEventListener('click', calculate);

这个计算器可以执行加、减、乘和除操作，并且具有 1 到 9 的数字键，以及清除和等于键。