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

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

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


http://www.ppmy.cn/news/1579740.html

相关文章

Netty启动源码NioEventLoop剖析accept剖析read剖析write剖析

学习链接 NIO&Netty - 专栏 Netty核心技术十–Netty 核心源码剖析Netty核心技术九–TCP 粘包和拆包及解决方案Netty核心技术七–Google ProtobufNetty核心技术六–Netty核心模块组件Netty核心技术五–Netty高性能架构设计 聊聊Netty那些事儿 - 专栏 一文搞懂Netty发送数…

AI自动文献综述——python先把知网的文献转excel

第一步 Refworks转excel 下载以后是个txt文件, 帮我把这个txt文件转excel,用函数形式来写便于我后期整理成软件 提取 其中的 标题,作者,单位,关键词,摘要。 分别存入excel列。 import re import pandas as pddef extract_and_convert(txt_file_path, output_excel_path…

地理信息系统(ArcGIS)在水文水资源、水环境中的应用

一 ArcGIS&#xff1a;数据管理 1.1ArcGIS界面及数据加载 1.2ArcGIS常见数据格式 1.3基于Geodatabase的数据库构建 1.4环境信息的查询与输出 1.5 文档保存方式 二 ArcGIS&#xff1a;数据转换 2.1 常用地图投影介绍 2.2 投影变换 2.3 地理坐标转换&#xff08;北京54、西安80…

当大模型训练遇上“双向飙车”:DeepSeek开源周 DualPipe解析指南

前言 在大模型训练中&#xff0c;传统流水线并行因单向数据流和通信延迟的限制&#xff0c;导致GPU利用率不足60%&#xff0c;成为算力瓶颈。DeepSeek团队提出的DualPipe双向流水线架构&#xff0c;通过双向计算流与计算-通信重叠的创新设计&#xff0c;将前向与反向传播拆解为…

Linux练级宝典->任务管理和守护进程

任务管理 进程组概念 每个进程除了进程ID以外&#xff0c;还有一个进程组&#xff0c;进程组就是一个或多个进程的集合 同一个进程组&#xff0c;代表着他们是共同作业的&#xff0c;可以接收同一个终端的各种信号&#xff0c;进程组也有其唯一的进程组号。还有一个组长进程&a…

IIS网站用myssl评级为B级

不光是IIS网站&#xff0c;包括.net使用HttpListener开发的web程序&#xff0c;在默认情况下都会被评为B级。 提示为&#xff1a;降级原因&#xff1a; 1. 没有使用AEAD系列加密套件,降级为B 2. 没有优先使用FS系列加密套件&#xff0c;降级为B。 我现在知道AEAD 系列加密套件…

塔能科技:智能机箱,为城市安防 “智” 造坚实堡垒

在当今智慧城市建设的浪潮中&#xff0c;城市安防面临着诸多挑战。设备管理难&#xff0c;众多分散的安防设备犹如一盘散沙&#xff0c;难以实现高效统一的管控&#xff1b;数据传输不稳定&#xff0c;关键时刻信息的延迟或丢失&#xff0c;可能导致严重后果。这些问题严重制约…

springboot EasyExcel 实现导入导出

1. 添加依赖 确保 Maven 依赖中包含 EasyExcel 3.0.5&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version></dependency><!-- excel工具 --><dep…