让 Deepseek 写一个计算器(网页)

ops/2025/3/16 10:51:19/
aidu_pl">

完整代码 

<!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>容器来包裹整个计算器,并在其中放置了一个输入框和一个按钮网格。

<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布局来排列按钮。

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

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

文章来源:https://blog.csdn.net/weixin_42581036/article/details/146253376
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/ops/166185.html

相关文章

request模块基本使用方法

文章目录 一、前言二、请求2.1 请求方式2.2 请求参数2.3 cookie 三、响应 一、前言 官方文档&#xff1a;https://requests.readthedocs.io/en/latest/ 模块安装&#xff1a;pip install request 二、请求 2.1 请求方式 常用请求方法&#xff1a;get、post 请求方法含义get向…

Webpack构建流程详解优化前端性能\Dev-Server与Proxy\网络攻击\HMR

简版 核心流程图 根据&#xff0c;Webpack的构建流程分为初始化、编译和输出三个阶段。初始化阶段读取配置、加载插件、实例化Compiler。编译阶段&#xff08;构建依赖关系&#xff09;涉及Compiler类的运行&#xff0c;生成Compilation对象&#xff0c;处理模块依赖。输出阶…

FreeBSD下安装npm Node.js的22版本 并简单测试js服务器

FreeBSD下安装Node.js 在FreeBSD下安装Node.js很方便&#xff0c;直接pkg安装即可。 使用pkg install安装npm sudo pkg install npm-node22 Updating FreeBSD repository catalogue... Fetching data.pkg: 100% 7 MiB 2.5MB/s 00:03 Processing entries: 100% FreeB…

科大讯飞嵌入式软件开发面试总结

科大讯飞嵌入式软件开发面试总结 一、面试流程 技术面&#xff08;两轮&#xff0c;每轮约 30-40 分钟&#xff0c;重点岗位可能有终面&#xff09; 考察方向&#xff1a;C 语言、数据结构、Linux 系统、ARM 架构、RTOS、驱动开发、项目经验等。 形式&#xff1a;一对一问答&…

工作记录 2017-01-13

工作记录 2017-01-13 序号 工作 相关人员 1 协助BPO进行Billing的工作。 修改BillingJobPoster&#xff0c;处理CCDA 的自动导入。 修改邮件上的问题。 更新RD服务器。 郝 更新的问题 1、In all Notes part, where “posted by…” use Biller Init NOT biller full na…

【云原生知识】如何搭建基于服务网关的分布式服务?

文章目录 概述服务网格核心概念以及原理介绍服务网格相关技术栈介绍 优缺点优势缺点 搭建基于服务网关的分布式服务一、环境准备二、部署 Istio三、配置服务网格四、部署微服务五、验证和监控六、优化和扩展 概述 服务网格核心概念以及原理介绍 服务网格&#xff08;Service …

星越L_内后视镜使用讲解

目录 1内后视镜角度调节 2,防炫目功能

小语言模型(SLM)技术解析:如何在有限资源下实现高效AI推理

引言&#xff1a;为什么小语言模型&#xff08;SLM&#xff09;是2025年的技术焦点&#xff1f; 2025年&#xff0c;人工智能领域正经历一场“由大变小”的革命。尽管大语言模型&#xff08;LLM&#xff09;如GPT-4、Gemini Ultra等在复杂任务中表现惊艳&#xff0c;但其高昂的…