AI生成式探究学习教学辅助设计单-6.1 简单计算器的制作.docx

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=viewportcontent=width=device-width,initial-scale=1.0

title简单计算器/title

linkrel=stylesheethref=styles.css

/head

body

divclass=calculator

!--显示框--

inputtype=textid=displaydisabled

!--按钮区域--

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{