请实现一个计算器的功能

<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<style>
  body {
    font-family: sans-serif;
  }
  .calculator {
    width: 200px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .display {
    background-color: #eee;
    padding: 5px;
    margin-bottom: 5px;
    text-align: right;
  }
  button {
    width: 48px;
    height: 30px;
    margin: 2px;
  }
</style>
</head>
<body>

<div class="calculator">
  <div class="display" id="display">0</div>
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendToDisplay('/')">/</button>
  <button onclick="appendToDisplay('*')">*</button>
  <button onclick="appendToDisplay('-')">-</button>
  <button onclick="appendToDisplay('7')">7</button>
  <button onclick="appendToDisplay('8')">8</button>
  <button onclick="appendToDisplay('9')">9</button>
  <button onclick="appendToDisplay('+')">+</button>
  <button onclick="appendToDisplay('4')">4</button>
  <button onclick="appendToDisplay('5')">5</button>
  <button onclick="appendToDisplay('6')">6</button>
  <button onclick="calculate()">=</button>
  <button onclick="appendToDisplay('1')">1</button>
  <button onclick="appendToDisplay('2')">2</button>
  <button onclick="appendToDisplay('3')">3</button>
  <button onclick="appendToDisplay('0')">0</button>
  <button onclick="appendToDisplay('.')">.</button>

</div>

<script>
  let display = document.getElementById('display');

  function appendToDisplay(value) {
    display.innerText += value;
  }

  function clearDisplay() {
    display.innerText = '';
  }

  function calculate() {
    try {
      display.innerText = eval(display.innerText);
    } catch (error) {
      display.innerText = 'Error';
    }
  }
</script>

</body>
</html>

改进说明:

使用eval()的风险: 这段代码使用了eval()，这在处理用户输入时存在安全风险。更健壮的方案是构建一个语法树或者使用一个专门的数学表达式解析库。
错误处理: 目前的错误处理比较简单。可以提供更具体的错误信息，例如除以零的错误。
用户体验: 可以添加更多功能，例如：
- 退格键
- 括号
- 内存功能 (M+, M-, MR, MC)
- 更高级的数学函数 (sin, cos, tan, sqrt, etc.)
- 键盘支持
样式: 样式可以根据需要进行调整。

更安全的实现 (不使用eval() - 简单示例):

这个例子只支持加减乘除，但演示了如何避免使用eval()：

function calculate() {
  try {
    let expression = display.innerText;
    let numbers = expression.split(/[\+\-\*\/]/);
    let operators = expression.replace(/[0-9\.]/g, '').split('');

    let result = parseFloat(numbers[0]);

    for (let i = 0; i < operators.length; i++) {
      let num = parseFloat(numbers[i + 1]);
      switch (operators[i]) {
        case '+':
          result += num;
          break;
        case '-':
          result -= num;
          break;
        case '*':
          result *= num;
          break;
        case '/':
          if (num === 0) {
            display.innerText = 'Error: Division by zero';
            return;
          }
          result /= num;
          break;
      }
    }

    display.innerText = result;
  } catch (error) {
    display.innerText = 'Error';
  }
}