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

下载本文档

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

文档简介

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");functionappendToDisplay(value){display.value+=value;}functionclearDisplay(){display.value="";}functioncalculateResult(){try{constresult=eval(display.value);display.value=result;}catch(error){display.value="错误";}}</script></body></html>```---###8.运行方式1.将上述代码保存为一个`.html`文件（如`calculator.html`）。2.使用浏览器打开该文件即可运行计算器。---希望这个示例对你有帮助！如果有其他问题，欢迎随时提问。DeepSeek非常严谨的使用了提示词当中的web前端技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。从另外一个角度非常严谨完整的给出了另外一种设计方法，代码的书写。打开了学习前端JavaScript模块的思维定式和畏难情绪AI生成式探究学习教学辅助设计单使用AI名称：豆包班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第六模块网站页面交互（JavaScript）6.2选座位小程序的制作6.2.2知识准备1.函数的定义JavaScript中函数的定义，请做个简单的形象的比喻可以把JavaScript中的函数想象成一个工厂里的“生产小车间”：函数声明：就像是工厂按照一套固定标准流程专门建造的一个车间，有自己的名字和明确的功能。比如叫“加法车间”，专门负责做加法运算，functionadd(a,b){returna+b;}，只要把数字原料a和b送进去，它就会按照设定好的流程把它们相加后输出结果。函数表达式：好比是先准备一个空的车间场地，然后把一个已经造好的生产流程放进去。像constsubtract=function(a,b){returna-b;};，就是把减法这个生产流程放进了subtract这个车间场地里，以后要用减法功能就找subtract车间。箭头函数：可以看作是一个简化版的高效小车间，它用更简洁的方式来做事情。比如constmultiply=(a,b)=>a*b;，就像一个专门快速做乘法的小车间，看到a和b这两种原料进来，马上把它们乘起来给出结果，没有太多复杂的中间步骤，简洁又高效比喻形象可以对提出的问题针对性的回答有助于理解知识点中的不懂的环节对于函数的定义有了更形象的理解-可以把JavaScript中的函数想象成一个工厂里的“生产小车间”，有助于在代码书写过程中更好的使用函数，提高逻辑思维能力，完成网站页面中交互功能。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第六模块网站页面交互（JavaScript）6.3学生随机提问程序的制作使用HTML5，CSS3和JavaScript。完成学生随机提问程序的制作，给出案例代码。 以下是一个使用HTML5、CSS3和JavaScript实现的学生随机提问程序案例代码：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>课堂随机提问系统</title><style>body{font-family:'Arial',sans-serif;background:#f0f2f5;display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:20px;}.container{background:white;padding:30px;border-radius:15px;box-shadow:04px6pxrgba(0,0,0,0.1);width:90%;max-width:600px;}h1{color:#2c3e50;text-align:center;margin-bottom:30px;}#student-list{width:100%;height:200px;padding:10px;margin-bottom:20px;border:2pxsolid#3498db;border-radius:8px;resize:vertical;}.button-container{text-align:center;margin:20px0;}button{background:#3498db;color:white;border:none;padding:12px30px;border-radius:25px;cursor:pointer;font-size:16px;transition:all0.3sease;box-shadow:02px4pxrgba(0,0,0,0.2);}button:hover{background:#2980b9;transform:translateY(-2px);box-shadow:04px8pxrgba(0,0,0,0.2);}button:disabled{background:#bdc3c7;cursor:not-allowed;}#result{text-align:center;font-size:24px;margin:20px0;min-height:60px;padding:15px;border-radius:8px;background:#ecf0f1;transition:all0.3sease;}#result.highlight{background:#2ecc71;color:white;transform:scale(1.05);}.rolling-animation{animation:roll0.1sinfinite;}@keyframesroll{0%{transform:translateY(0);}50%{transform:translateY(-5px);}100%{transform:translateY(0);}}</style></head><body><divclass="container"><h1>🎓课堂随机提问系统</h1><textareaid="student-list"placeholder="请输入学生姓名，每行一个..."></textarea><divclass="button-container"><buttononclick="startRandomSelection()">开始随机提问</button></div><divid="result">👉准备就绪</div></div><script>letisRolling=false;letcurrentInterval=null;functionstartRandomSelection(){if(isRolling)return;conststudents=document.getElementById('student-list').value.split('\n').map(s=>s.trim()).filter(s=>s!=='');if(students.length===0){alert('请先输入学生名单！');return;}isRolling=true;constresultDiv=document.getElementById('result');resultDiv.classList.add('rolling-animation');letcount=0;currentInterval=setInterval(()=>{//随着时间增加间隔，制造减速效果if(count<15){resultDiv.textContent=students[Math.floor(Math.random()*students.length)];count++;}else{clearInterval(currentI

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

温馨提示

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

最新文档

评论

0/150

提交评论