让 Deepseek 写一个计算器（网页）

完整代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<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;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .calculator {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .calculator input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 18px;
            text-align: right;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .calculator .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .calculator .buttons button {
            padding: 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            background-color: #f1f1f1;
            cursor: pointer;
        }
        .calculator .buttons button:hover {
            background-color: #ddd;
        }
        .calculator .buttons button.operator {
            background-color: #ff9500;
            color: white;
        }
        .calculator .buttons button.operator:hover {
            background-color: #e08900;
        }
        .calculator .buttons button.equal {
            background-color: #34c759;
            color: white;
            grid-column: span 2;
        }
        .calculator .buttons button.equal:hover {
            background-color: #2da94f;
        }
    </style>
</head>
<body>

<div class="calculator">
    <input type="text" id="display" disabled>
    <div class="buttons">
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()">DEL</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="calculate()" class="equal">=</button>
        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

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

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

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

    function calculate() {
        let display = document.getElementById('display');
        try {
            // 使用 eval 计算表达式，支持运算符优先级
            display.value = eval(display.value);
        } catch (e) {
            display.value = '错误';
        }
    }
</script>

</body>
</html>

在现代生活中，计算器是我们日常工作和学习中不可或缺的工具。无论是进行简单的加减乘除运算，还是处理复杂的数学表达式，计算器都能帮助我们快速得到结果。本文将介绍如何使用HTML、CSS和JavaScript创建一个简单的网页计算器，并解释其实现原理。

1. 项目结构

这个简单的计算器项目主要由三部分组成：

HTML：用于构建计算器的基本结构和布局。
CSS：用于美化计算器的外观，使其更加用户友好。
JavaScript：用于实现计算器的逻辑功能，如输入、删除、清空和计算等。

2. HTML结构

HTML部分定义了计算器的基本结构。我们使用了一个<div>容器来包裹整个计算器，并在其中放置了一个输入框和一个按钮网格。

html 复制代码

<div class="calculator">
    <input type="text" id="display" disabled>
    <div class="buttons">
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()">DEL</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="calculate()" class="equal">=</button>
        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

输入框 ：<input type="text" id="display" disabled>用于显示用户输入和计算结果。disabled属性确保用户不能直接通过键盘输入。
按钮：每个按钮都绑定了onclick事件，用于处理用户的点击操作。按钮分为数字按钮、运算符按钮和功能按钮（如清空、删除、等于）。

3. CSS样式

CSS部分用于美化计算器的外观。我们使用了Flexbox布局来使计算器在页面中居中显示，并使用Grid布局来排列按钮。

css 复制代码

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.calculator input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

.calculator .buttons button {
    padding: 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.calculator .buttons button:hover {
    background-color: #ddd;
}

.calculator .buttons button.operator {
    background-color: #ff9500;
    color: white;
}

.calculator .buttons button.operator:hover {
    background-color: #e08900;
}

.calculator .buttons button.equal {
    background-color: #34c759;
    color: white;
    grid-column: span 2;
}

.calculator .buttons button.equal:hover {
    background-color: #2da94f;
}

居中显示 ：通过display: flex和justify-content: center、align-items: center，我们将计算器居中显示在页面上。
按钮布局 ：使用grid-template-columns: repeat(4, 1fr)将按钮排列成4列的网格布局。
按钮样式：不同类型的按钮（如运算符、等于按钮）有不同的背景颜色和悬停效果，以提高用户体验

4. JavaScript逻辑

JavaScript部分负责处理计算器的逻辑功能。我们定义了四个函数来实现计算器的基本操作：

javascript 复制代码

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

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

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

function calculate() {
    let display = document.getElementById('display');
    try {
        // 使用 eval 计算表达式，支持运算符优先级
        display.value = eval(display.value);
    } catch (e) {
        display.value = '错误';
    }
}

appendToDisplay(value)：将用户点击的按钮值追加到输入框中。
clearDisplay()：清空输入框中的内容。
deleteLast()：删除输入框中的最后一个字符。
calculate() ：使用eval()函数计算输入框中的表达式，并将结果显示在输入框中。如果表达式无效，则显示"错误"。

5. 总结

通过这个简单的项目，我们学习了如何使用HTML、CSS和JavaScript创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。

希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！