请实现一个计算器的功能

在前端开发中，你可以使用HTML、CSS和JavaScript来创建一个简单的计算器。以下是一个基本的实现示例：

HTML部分（创建一个简单的计算器界面）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="num" value="7">7</button>
            <button class="num" value="8">8</button>
            <button class="num" value="9">9</button>
            <button class="operator" value="/">/</button>
            <button class="num" value="4">4</button>
            <button class="num" value="5">5</button>
            <button class="num" value="6">6</button>
            <button class="operator" value="*">*</button>
            <button class="num" value="1">1</button>
            <button class="num" value="2">2</button>
            <button class="num" value="3">3</button>
            <button class="operator" value="-">-</button>
            <button class="num" value="0">0</button>
            <button class="num" value=".">.</button>
            <button id="equal" value="=">=</button>
            <button class="operator" value="+">+</button>
            <button id="clear">清除</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（为计算器添加样式）：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.calculator {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

#display {
    width: 100%;
    text-align: right;
    font-size: 18px;
    margin-bottom: 10px;
    background-color: #e0e0e0;
    border: none;
    padding: 5px;
    border-radius: 5px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

button {
    background-color: #4caf50;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

JavaScript部分（为计算器添加功能）：

// script.js
document.querySelectorAll('.num, .operator').forEach(button => {
    button.addEventListener('click', function() {
        const display = document.getElementById('display');
        display.value += this.value;
    });
});

document.getElementById('equal').addEventListener('click', function() {
    const display = document.getElementById('display');
    display.value = eval(display.value); // 注意：eval() 函数在实际项目中应谨慎使用，因为它可能带来安全风险。这里为了简化示例而使用。
});

document.getElementById('clear').addEventListener('click', function() {
    const display = document.getElementById('display');
    display.value = '';
});