AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作_第1页
AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作_第2页
AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作_第3页
AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作_第4页
AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第六模块网站页面交互（JavaScript）6.1简单计算器的制作使用HTML5，CSS3和JavaScript。完成加减乘除功能的简单计算器的制作，给出案例代码。 以下是一个使用**HTML5**、**CSS3**和**JavaScript**实现的简单计算器示例代码，支持加、减、乘、除四则运算：---###1.HTML结构```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>简单计算器</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="calculator"><!--显示框--><inputtype="text"id="display"disabled><!--按钮区域--><divclass="buttons"><buttononclick="clearDisplay()">C</button><buttononclick="appendToDisplay('/')">/</button><buttononclick="appendToDisplay('*')">*</button><buttononclick="appendToDisplay('-')">-</button><buttononclick="appendToDisplay('7')">7</button><buttononclick="appendToDisplay('8')">8</button><buttononclick="appendToDisplay('9')">9</button><buttononclick="appendToDisplay('+')">+</button><buttononclick="appendToDisplay('4')">4</button><buttononclick="appendToDisplay('5')">5</button><buttononclick="appendToDisplay('6')">6</button><buttononclick="calculateResult()"class="equals">=</button><buttononclick="appendToDisplay('1')">1</button><buttononclick="appendToDisplay('2')">2</button><buttononclick="appendToDisplay('3')">3</button><buttononclick="appendToDisplay('0')">0</button><buttononclick="appendToDisplay('.')">.</button></div></div><scriptsrc="script.js"></script></body></html>```---###2.CSS样式```css/*styles.css*/body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f4f4f4;font-family:Arial,sans-serif;}.calculator{background-color:#333;padding:20px;border-radius:10px;box-shadow:0010pxrgba(0,0,0,0.5);}#display{width:100%;height:50px;background-color:#222;color:#fff;border:none;text-align:right;padding:10px;font-size:24px;border-radius:5px;margin-bottom:10px;}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}button{background-color:#444;color:#fff;border:none;padding:20px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color0.3s;}button:hover{background-color:#555;}.equals{grid-column:span1;background-color:#f39c12;}.equals:hover{background-color:#e67e22;}```---###3.JavaScript逻辑```javascript//script.js//获取显示框元素constdisplay=document.getElementById("display");//向显示框中追加内容functionappendToDisplay(value){display.value+=value;}//清空显示框functionclearDisplay(){display.value="";}//计算结果functioncalculateResult(){try{//使用eval计算表达式constresult=eval(display.value);display.value=result;}catch(error){//如果计算出错，显示错误信息display.value="错误";}}```---###4.功能说明1.**显示框**：-用于显示用户输入的内容和计算结果。-通过`disabled`属性禁止用户直接输入。2.**按钮**：-数字按钮（0-9）和运算符按钮（`+`、`-`、`*`、`/`）用于向显示框中追加内容。-`C`按钮用于清空显示框。-`=`按钮用于计算结果。3.**计算逻辑**：-使用`eval()`函数计算显示框中的表达式。-如果计算出错（如除数为0或非法表达式），显示"错误"。---###5.运行效果-打开浏览器，加载页面后可以看到一个简单的计算器界面。-点击按钮输入数字和运算符，点击`=`计算结果。-点击`C`清空显示框。---###6.注意事项1.**安全性**：-`eval()`函数会执行任意JavaScript代码，可能存在安全风险。在实际项目中，建议使用更安全的表达式解析库（如`math.js`）。2.**扩展功能**：-可以添加更多功能，如支持括号、百分比计算、退格键等。3.**响应式设计**：-可以通过调整CSS样式，使计算器在不同设备上都能良好显示。---###7.完整代码整合将HTML、CSS和JavaScript代码整合到一个文件中：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>简单计算器</title><style>body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f4f4f4;font-family:Arial,sans-serif;}.calculator{background-color:#333;padding:20px;border-radius:10px;box-shadow:0010pxrgba(0,0,0,0.5);}#display{width:100%;height:50px;background-color:#222;color:#fff;border:none;text-align:right;padding:10px;font-size:24px;border-radius:5px;margin-bottom:10px;}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}button{background-color:#444;color:#fff;border:none;padding:20px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color0.3s;}button:hover{background-color:#555;}.equals{grid-column:span1;background-color:#f39c12;}.equals:hover{background-color:#e67e22;}</style></head><body><divclass="calculator"><inputtype="text"id="display"disabled><divclass="buttons"><buttononclick="clearDisplay()">C</button><buttononclick="appendToDisplay('/')">/</button><buttononclick="appendToDisplay('*')">*</button><buttononclick="appendToDisplay('-')">-</button><buttononclick="appendToDisplay('7')">7</button><buttononclick="appendToDisplay('8')">8</button><buttononclick="appendToDisplay('9')">9</button><buttononclick="appendToDisplay('+')">+</button><buttononclick="appendToDisplay('4')">4</button><buttononclick="appendToDisplay('5')">5</button><buttononclick="appendToDisplay('6')">6</button><buttononclick="calculateResult()"class="equals">=</button><buttononclick="appendToDisplay('1')">1</button><buttononclick="appendToDisplay('2')">2</button><buttononclick="appendToDisplay('3')">3</button><buttononclick="appendToDisplay('0')">0</button><buttononclick="appendToDisplay('.')">.</button></div></div><script>constdisplay=document.getElementById("display");functi

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论