HTML5计算器开发教程详解

    

.calculator {

  width: 300px;

  margin: 50px auto;

  border: 1px solid #ccc;

  border-radius: 10px;

  overflow: hidden;

  font-family: Arial, sans-serif;

}

#result {

  width: 100%;

  height: 60px;

  font-size: 24px;

  text-align: right;

  padding: 10px;

  box-sizing: border-box;

}

.buttons {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

}

button {

  padding: 20px;

  font-size: 18px;

  border: none;

  background: #f8f8f8;

  cursor: pointer;

}

button:hover {

  background: #e0e0e0;

}

button.equal {

  background: #4CAF50;

  color: white;

}

function appendValue(value) {

  document.getElementById("result").value += value;

}

function clearDisplay() {

  document.getElementById("result").value = "";

}

function deleteChar() {

  let currentValue = document.getElementById("result").value;

  document.getElementById("result").value = currentValue.slice(0, -1);

}

function calculate() {

  let expression = document.getElementById("result").value;

  if (expression === "") return;

  try {

    let result = eval(expression.replace('×', '*').replace('÷', '/'));

    document.getElementById("result").value = result;

  } catch (e) {

    document.getElementById("result").value = "错误";

  }

}