【新手指南】一起来制作网页计算器App吧！复制粘贴即可运行的计算器开发入门

要在电脑上通过命令提示符或 PowerShell 运行 Python，需要先下载并安装 Python。
如果你还没有安装，请参考Python安装与开发环境配置一文来完成安装。

“我刚开始学编程，不知道该做什么好……”

大家好！就在几个月前，笔者也和大家一样，是个编程零基础的小白。在AI的帮助下，我勉强独立创建了两个网站，并在这个过程中深刻体会到：“不断地动手制作并让它运行起来，是学习编程的最佳捷径！”

因此，这次我想和大家一起，使用网页技术（HTML, CSS, JavaScript）来制作一个作为编程学习第一步非常受欢迎的“计算器应用”。这篇文章的目标只有一个。

就是让你体验到“仅通过复制粘贴，就能在浏览器里做出一个能正常运行的应用！”的成功感。

我会尽量用通俗易懂的方式解释专业术语。来吧，让我们一起享受创造的世界吧！

完成后的网页计算器应用截图 — 读完这篇文章时，你的浏览器上就会运行这样一个计算器应用了！

步骤1：用HTML构建计算器的骨架

首先，我们用HTML来创建计算器的结构部分。HTML是定义网页“骨架”的语言。我们将用它来放置显示屏和按钮等部件。

以下的HTML代码定义了计算器的所有部件。

<!-- HTML: 定义计算器的骨架 -->
<div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
        <button onclick="clearDisplay()" class="clear">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()" class="operator">⌫</button>
        
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('-')" class="operator">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('+')" class="operator">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

代码解说

<div class="calculator">: 这是包裹整个计算器的大盒子。
<input type="text" id="display" readonly>: 这是显示数字和结果的屏幕。通过readonly属性，我们禁止了从键盘直接输入。
<div class="buttons">: 这是用来整合所有按钮的盒子。
<button onclick="...">: 这是可以点击的按钮。onclick属性指定了当按钮被按下时要执行的JavaScript函数（我们稍后会创建）。

在这个阶段，它看起来还只是一堆没有设计和功能的零件。

步骤2：用CSS来设计外观

接下来，我们用CSS来把它设计得漂亮一点。CSS是装饰网页“外观”的语言。让我们为用HTML创建的骨架添加颜色和布局吧。

以下的CSS代码定义了计算器的设计。

/* CSS: 美化计算器的外观 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
.calculator {
    background-color: #444;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
    width: 100%;
    height: 70px;
    background-color: #222;
    color: white;
    font-size: 2.5em;
    /* ...其他样式... */
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    height: 70px;
    font-size: 1.5em;
    border-radius: 10px;
    /* ...其他样式... */
}
.operator {
    background-color: #f0ad4e;
}
.clear {
    background-color: #d9534f;
}

代码解说

.calculator { ... }: 指定名为class="calculator"的盒子（整个计算器）的设计。
.display { ... }: 这是显示屏的设计。我们把文字调大，背景设为黑色。
.buttons { display: grid; ... }: 这是布局的关键！display: grid是一个强大的功能，可以像Excel单元格一样将按钮排列成网格状。grid-template-columns: repeat(4, 1fr);命令它“创建四个等宽的列”。
.operator 和 .clear: 只为具有特定类名的按钮设置特殊的颜色。

步骤3：用JavaScript为计算器注入生命

最后，我们用JavaScript来创建计算器的“大脑”。JavaScript是为网页添加动态和功能的编程语言。我们将定义具体的行为，比如按下按钮时该做什么。

// JavaScript: 这是计算器的大脑部分
const display = document.getElementById('display');

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

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

function deleteLast() {
    display.value = display.value.slice(0, -1);
}

function calculateResult() {
    try {
        const result = eval(display.value);
        if (result === undefined || result === null || isNaN(result)) {
            display.value = 'Error';
        } else {
            display.value = result;
        }
    } catch (error) {
        display.value = 'Error';
    }
}

代码解说

const display = ...: 获取HTML中的显示屏部件，并将其存储在名为display的变量中。
appendToDisplay(value): 当数字或符号按钮被按下时调用，将新字符添加到显示屏的字符串中。
clearDisplay(): 用于“C”按钮。将显示屏清空。
calculateResult(): 用于“=”按钮。它使用一个方便的函数eval()来计算显示屏上的数学表达式（字符串），并用结果替换它。try...catch是为了在输入无法计算的表达式时显示错误而设置的“咒语”。

附赠：完整版代码全貌及其“展示方法”

好了，将到目前为止的HTML、CSS和JavaScript整合到一个文件中，就是能在浏览器中运行的计算器的最终形态了。如果你想把这个超棒的代码展示给别人，或者想在博客上介绍，我们为你准备了“完整版代码”和“用于显示的转义后代码”两种版本。

💡 完成品（直接保存为.html使用）

将这段代码完整复制并保存为名为calculator.html的文件，然后在浏览器中打开，即可看到一个立即可用的计算器。

📜 用于显示（粘贴到博客等处展示）

这是将上述完成品代码中的<和>等字符进行转换（转义），以便在HTML中安全显示的版本。请将其粘贴到博客文章等的<pre><code>标签之间。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页计算器</title>
    <style>
        /* CSS: 美化计算器的外观 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
            font-family: sans-serif;
            margin: 0;
        }
        .calculator {
            background-color: #444;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .display {
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
            text-align: right;
            font-size: 2.5em;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 70px;
            font-size: 1.5em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #e9e9e9;
            color: #333;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ddd;
        }
        .operator {
            background-color: #f0ad4e;
            color: white;
        }
        .operator:hover {
            background-color: #ec9a29;
        }
        .clear {
            background-color: #d9534f;
            color: white;
        }
        .clear:hover {
            background-color: #c9302c;
        }
    </style>
</head>
<body>

    <!-- HTML: 定义计算器的骨架 -->
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendToDisplay('/')" class="operator">/</button>
            <button onclick="appendToDisplay('*')" class="operator">*</button>
            <button onclick="deleteLast()" class="operator">⌫</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('-')" class="operator">-</button>

            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('+')" class="operator">+</button>

            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

            <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendToDisplay('.')">.</button>
        </div>
    </div>

    <script>
        // JavaScript: 这是计算器的大脑部分
        const display = document.getElementById('display');

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

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

        function deleteLast() {
            display.value = display.value.slice(0, -1);
        }

        function calculateResult() {
            try {
                // 'eval' 会将字符串作为数学表达式来求值。
                // 出于安全考虑，不推荐在实际网站上使用，
                // 但在这个独立的例子中，它既简单又有效。
                const result = eval(display.value);
                if (result === undefined || result === null || isNaN(result)) {
                    display.value = 'Error';
                } else {
                    display.value = result;
                }
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

【新手指南】一起来制作网页计算器App吧！复制粘贴即可运行的计算器开发入门

步骤1：用HTML构建计算器的骨架

代码解说

步骤2：用CSS来设计外观

代码解说

步骤3：用JavaScript为计算器注入生命

代码解说

附赠：完整版代码全貌及其“展示方法”

💡 完成品（直接保存为.html使用）

📜 用于显示（粘贴到博客等处展示）

相关模板