微信小程序开发 教案 3.10 教案-随机数求和

1、第3章 微信小程序概述任务3.10随机数求和课时内容随机数求和课时1教学目标掌握JavaScript中的Array和Number对象中的相关函数教学重点JavaScript中的Array和Number对象中的相关函数教学难点JavaScript中的Array和Number对象中的相关函数教学设计.教学思路：通过实训任务随机数求和的制作来让学生掌握JavaScript中的Array和 Number对象中的相关函数。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述设计一个小程序，运行后产生 组100以内的五个随机数，要求保留2位小数，显示出这随机 产生五个数的和；当点击“

2、求随机数的和”按钮时，首先产生一组新的五个随机数，并计算显示出 这组随机数的和。二、导入知识点本任务用到了 JavaScript中的Array和Number对象中的相关函数。JavaScript中的对象包括：字 符串、数字、数组、日期，等等。对象是拥有属性和方法的数据，属性是静态数据，方法是能够在 对象上执行的动作，即动态数据。l.JavaScript 中的 Array 对象用于在单个的变量中存储多个值，其常用属性和方法如表3.6所示。表3.6 Array对象常用属性和方法属性和方法说明length设置或返回数组中元素的数目concat()连接两个或更多的数组，并返回结果join()把数组的所

3、有元素放入一个字符串。元素通过指定的分隔符进行分隔POP()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素，并返回新的长度reverse()反向倒序数组中的元素shift()删除并返回数组的第个元素slice()从某个已有的数组返回选定的元素sort()对数组的元素进行排序splice()删除元素，并向数组添加新元素toSource()返回该对象的源代码toStringf)把数组转换为字符串，并返回结果toLocaleString()把数组转换为本地数组，并返回结果unshift()向数组的开头添加一个或更多元素，并返回新的长度valueOf()返回数组对象的原始值2J

4、avaScript 中的 Number 对象该对象是原始数值的包装对象，其常用属性和方法如表3.7所示。表3.7 Number对象常用属性和方法3.本此任务使用了以下知识点：属性和方法说明MAX_VALUE可表示的最大的数MIN_VALUE可表示的最小的数NaN非数字值NEGATIVEJNFINITY负无穷大，溢出时返回该值POSITIVEJNFINITY正无穷大，溢出时返回该值toString()把数字转换为字符串，使用指定的基数toLocaleString()把数字转换为字符串，使用本地数字格式顺序toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字toExponentia

5、l()把对象的值转换为指数计数法toPrecision()把数字格式化为指定的长度valueOf()返回一个Number对象的基本数字值(1) JavaScript代码中使用语句var r=(Math.random()*100).toFixed*1产生一个随机数后乘1,并使 用函数toFixed将产生的随机数保留小数点后2位。(2) JavaScript代码中Array对象函数的使用方法，并能产生5个随机数。(3) JavaScript代码中的Number对象函数的使用方法。三,实现效果根据任务描述可以做出如图3.16所示的效果。初始界面如图(a)所示，点击“产生新的随机 数”按钮后，将产生一

6、列新的随机数，并对这些随机数进行求和，如图(b)和图(c)所示。WeCharr10595% 10231023Webcin1023WebcinWebcin Q五个随机数求和随机产生的五个数分别为： 99.8245.624.0721.341.51五个随机数的和为：192.33999999999997五个随机数求和随机产生的五个数分别为：27.1379.1867.971023WebcinWebcin Q五个随机数求和随机产生的五个数分别为： 99.8245.624.0721.341.51五个随机数的和为：192.33999999999997五个随机数求和随机产生的五个数分别为：27.1379.186

7、7.9781.6253.47五个随机数的和为：309.37五个随机数求和随机产生的五个数分别为：14.5139.4879.5719.5611.13五个随机数的和为：164.25(a)初始界面(b)新的随机数列I(c)新的随机数列II四任务实现.编写index.wxml文件代码代码主要通过列表渲染的方法将逻辑层产生的随机数列表示在屏幕上，并显示随机数列的和, 最下面添加一个按钮，用于绑定产生新的随机数的事函数。.编写index.wxss文件代码.编写index.js文件代码代码中主要包含了全局变里和全局函数的定义，并在Page函数中定义了 0nLoad函数和newRand函 数。(1)全局变重的

8、定义。首先义1个全局数组变重rand和1个全局普通变重sum/and用来存储产 生的随机数列，sum用来存储随机数列的和。(2)全局函数的定义。定义createRand。函数用于产生随机数列并求和，该函数首先利用for循环产 生6个随机数并将这些数据添加到数组中。Math.random。函数用于产生01之间的随机数， Math.random()*100能够产生0100之间的随机数，toFixed函数用于实现将产生的随机数保留小数 点后2位，乘1的目的是将产生的随机数字符串转换为数值类型。rand.push(r)用于将产生的随机数r添加到rand数组中。console.log(sum)函数用于在

9、控制台显示sum数据，这种方法对程序调试很有帮助。(5)在onLoad()和newRand。方法中调用createRand。方法产生随机数列并求和，然后通过 this. setData。方法将结果渲染到视图层。练习课时内容递归求和计算器课时1教学目标掌握JavaScript中的逻辑运算符 掌握button组件的使用方法教学重点JavaScript中的逻辑运算符 button组件的使用方法教学难点button组件的使用方法教学设计.教学思路：通过实训任务成绩计算器的制作来让学生掌握JavaScript中的逻辑运算符 与button组件的使用方法.教学手段：多媒体+计算机.教学资料：教材、多媒体课

10、件教学内容一、任务描述设计一个计算学生平均成绩的小程序。当输入学生信息和各门功课成绩并提交后，能够显示学 生的信息及平均成绩。二、导入知识点本任务涉及JavaScript中的逻辑运算符和button组件的使用方法。1. JavaScript中的逻辑运算符用于测定变量或值之间的逻辑关系，其中x=6, y=7,如表3.2解释了逻辑运算符的含义。表3.2 JavaScript中的逻辑运算符运算符描述例子&and(xvlO&yl)为 falseIIor(x=6|y=6)为 true!*not(x=y)为 false.button按钮组件该组件常用属性如表3.3所示。表3.3 button组件常用属性属

11、性size type和form-type的合法值如表3.4所示。属性类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类型plainbooleanFALSE否按钮是否镂空，背景色透明disabledbooleanFALSE否是否禁用loadingbooleanFALSE否名称前是否带loading图标form-typestring否用于form组件，点击分别会触发form 组件的submit/reset事件表3.4属性size、type和form-type的合法值属性合法值说明sizedefault默认大小mini小尺寸typepri

12、mary绿色default白色warn红色form-typesubmit提交表单reset重置表单三,实现效果根据本次任务的描述，可做出如图3.14所示的效果。初始界面如图（a）初始界面所示，当输入 姓名时，屏幕下面显示中文的输入键盘，如图（b）输入信息时的界面所示，当输入成绩时，屏幕下 面显示数字键盘；输入完成后点击“提交”按钮，在按钮下方将显示学生姓名及成绩，如图（c）提交后的界面所示。在输入过程中，如果某项内容为空，点击“提交”按钮后屏幕没有反应。w*Chrr11:12Weixin成绩计算器姓名:WeCh-tv11:14V.e xi n96% mi*成绩计算器姓名:语文或旗:数学成绫:

13、WeChatr121496%Weixin Q成绩计算器提交姓名：邦伟语文成绩：89数学成绩：w*Chrr11:12Weixin成绩计算器姓名:WeCh-tv11:14V.e xi n96% mi*成绩计算器姓名:语文或旗:数学成绫: WeChatr121496%Weixin Q成绩计算器提交姓名：邦伟语文成绩：89数学成绩：96数学成绩：92平均分：92.33333333333333语文成绩数学成绩数学成绩平均分:数学成残:平均分:(a)初始界面(b)输入信息时的界面(c)提交后的界面图3.14(a)初始界面四,任务实现(1)编写index.wxml文件代码。代码中主要包含用于输入学生姓名和成绩的input输入框；(2)编写index.wxss文件代码。该文件中定义了 index.wxml文件中使用的各种样式，包括：page、 placeholder input、 button content 和.content-item。(3)编写index.wxss文件代码。该文件中定义了 index.wxml文件中使用的各种样式，包括：page、 box titile placeholderinput button、content 和.conte