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

—Qeyser2025-03-16 10:56

完整代码

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

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

相关推荐
xjt_090119 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农31 分钟前
Vue 2.3
前端·javascript·vue.js
说实话起个名字真难啊42 分钟前
用docker来安装openclaw
docker·ai·容器
夜郎king1 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳1 小时前
JavaScript 的宏任务和微任务
javascript
小白狮ww1 小时前
要给 OCR 装个脑子吗？DeepSeek-OCR 2 让文档不再只是扫描
人工智能·深度学习·机器学习·ocr·cpu·gpu·deepseek
金融RPA机器人丨实在智能1 小时前
Android Studio开发App项目进入AI深水区：实在智能Agent引领无代码交互革命
android·人工智能·ai·android studio
乂爻yiyao2 小时前
Vibe Coding 工程化实践
人工智能·ai
夏幻灵2 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星2 小时前
javascript之二重循环练习
开发语言·javascript·数据库
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04Vue-skills的中文文档05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示