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

devtools/2025/3/17 22:40:52/
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/devtools/167935.html

相关文章

鸿蒙 @ohos.arkui.inspector (布局回调)

鸿蒙 ohos.arkui.inspector (布局回调) 在鸿蒙开发中&#xff0c;ohos.arkui.inspector 模块提供了一种强大的方式来监听组件的布局和绘制完成事件。这对于实现动态布局调整、自定义动画以及优化性能等场景非常有用。本文将详细介绍如何使用 ohos.arkui.inspector 模块实现布局…

凸优化算法学习笔记:决策单调性与 wqs二分

文章目录 前言决策单调性单调矩阵&#xff0c;完全单调矩阵&#xff0c;蒙日阵决策单调性优化 d p dp dp线性 d p dp dp分治&#xff08;离线&#xff09;二分队列&#xff08;在线&#xff09;SMAWK 区间 d p dp dp 练习题LOJ6039 w q s wqs wqs 二分&#xff08;蒙日阵最短…

Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发

一、未正确设置容器高度 问题描述 scroll-view 未设置明确高度或高度值无效&#xff0c;导致无法形成有效滚动区域。 解决方案 • 使用行内样式直接设置 height&#xff08;如 style"height: 500rpx;"&#xff09;&#xff0c;避免类名样式被覆盖。 • 动态计算高度…

【每日学点HarmonyOS Next知识】页面引用问题、Json三方库、路由表使用、下拉刷新问题、视频播放错误

1、HarmonyOS 全屏的自定义组件被其他页面引用后导致其他页面按钮功能无法使用问题&#xff1f; 参考代码&#xff1a; //1.index.ets Entry Component struct First {State visible: Visibility Visibility.Nonebuild() {// 使用stack可以实现假的dialog覆盖原页面上面Stac…

LangChain教程 - Agent -之 REACT_DOCSTORE

1. 引言 在智能问答和知识检索的场景下&#xff0c;如何让 AI 既具备推理能力&#xff0c;又能高效利用外部知识库&#xff1f;ReAct 框架已经展现了强大的推理能力&#xff0c;而 ReACT_DOCSTORE 则进一步增强了这一能力&#xff0c;结合了文档存储&#xff08;DocStore&…

【愚公系列】《高效使用DeepSeek》009-PPT大纲自动生成

标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…

总结 HTTP 协议的基本格式, 相关知识以及抓包工具fiddler的使用

目录 1 HTTP是什么 2 HTTP协议格式 3 HTTP请求(Request) 3.1 认识URL 3.2 方法 3.3 认识请求"报头"(header) 3.3.1 Host 3.3.2 Content-Length 3.3.3 Content-Type 3.3.4 User-Agent (简称UA) 3.3.5 Referer 3.3.6 Cookie和Session 4 HTTP响应详解 4.…

JVM调优关注的核心指标?

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…