10.HTML开发--计算器：制作一个简单的在线计算器，可以执行基本的数学运算。-CFANZ编程社区

创建一个简单的在线计算器是一个很有趣的项目，它可以执行基本的数学运算，如加法、减法、乘法和除法。以下是一个基于HTML、CSS和JavaScript的计算器示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
        }
        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }
        input[type="text"] {
            grid-column: span 4;
            padding: 10px;
            font-size: 18px;
        }
        input[type="button"] {
            padding: 10px;
            font-size: 18px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <h1>简单计算器</h1>
    </header>
    <div class="container">
        <input type="text" id="display" readonly>
        <div class="calculator">
            <input type="button" value="7" onclick="appendToDisplay('7')">
            <input type="button" value="8" onclick="appendToDisplay('8')">
            <input type="button" value="9" onclick="appendToDisplay('9')">
            <input type="button" value="/" onclick="appendToDisplay('/')">
            <input type="button" value="4" onclick="appendToDisplay('4')">
            <input type="button" value="5" onclick="appendToDisplay('5')">
            <input type="button" value="6" onclick="appendToDisplay('6')">
            <input type="button" value="*" onclick="appendToDisplay('*')">
            <input type="button" value="1" onclick="appendToDisplay('1')">
            <input type="button" value="2" onclick="appendToDisplay('2')">
            <input type="button" value="3" onclick="appendToDisplay('3')">
            <input type="button" value="-" onclick="appendToDisplay('-')">
            <input type="button" value="C" onclick="clearDisplay()">
            <input type="button" value="0" onclick="appendToDisplay('0')">
            <input type="button" value="=" onclick="calculate()">
            <input type="button" value="+" onclick="appendToDisplay('+')">
        </div>
    </div>

    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        function calculate() {
            try {
                const result = eval（document.getElementById('display').value);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
    </script>
</body>
</html>

这个简单的计算器包括一个文本输入框和一个按钮网格，用户可以通过点击按钮来输入数字和运算符，并使用等号按钮来执行计算。

要创建你自己的计算器，你可以按照以下步骤进行：