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

server/2025/3/16 11:22:41/
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/server/175408.html

相关文章

全概公式和贝叶斯公式

条件概率的概念 引例 如果同时掷两枚质地均匀的硬币&#xff0c;共有四种可能的情况&#xff0c;于是我们可得 Ω{&#xff08;正&#xff0c;正&#xff09;​&#xff0c;​&#xff08;正&#xff0c;反&#xff09;​&#xff0c;​&#xff08;反&#xff0c;正&#x…

【商城实战(33)】解锁版本迭代与更新策略

【商城实战】专栏重磅来袭&#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建&#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用户、商品、订单等核心模块开发&#xff0c;再到性能优化、安全加固、多端适配&#xf…

Unity AssetBundles资源加载管理器

Unity AssetBundles资源加载管理器 实现了AB包管理器 目的: 让外部更方便地进行资源加载(同步加载/异步加载) 技术包含&#xff1a; AB包相关API单例模式委托(Lambda)表达式协程字典 AssetBundles工具下载地址 using System.Collections; using System.Collections.Generic;…

如何用C#编写一个可以验证登录信息的简单登录页面?

要用C#编写一个简单的登录页面&#xff0c;可以按照以下步骤进行&#xff1a; 创建一个新的C#控制台应用程序项目。 创建一个名为Login.cs的类&#xff0c;该类包含用户名和密码作为属性。 class Login {public string Username { get; set; }public string Password { get;…

【Java基础】java中的lambda表达式

Java Lambda表达式深度解析&#xff1a;语法、简化规则与实战 前言 Java 8的Lambda表达式通过简化匿名内部类和引入函数式编程&#xff0c;极大提升了代码的简洁性和可读性。 一、Lambda表达式的核心语法 Lambda表达式由参数列表、->符号和表达式主体组成&#xff0c;其基…

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码】

目录 一、界面功能展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;保存 四、模…

C# Exe + Web 自动化 (BitComet 绿灯 自动化配置、设置)

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…

全球领先的光学方案设计公司:倚光科技

在光学技术革新的浪潮中&#xff0c;倚光&#xff08;深圳&#xff09;科技有限公司以创新者的姿态迅速崛起&#xff0c;成为全球光学领域的标杆企业。自 2021 年成立以来&#xff0c;公司始终聚焦纳米光学技术研发与超精密加工&#xff0c;凭借顶尖的技术实力和前瞻性的市场布…