教学课件任务9 数组应用特效.pptx

教材配套资源页完整PPT课件教学课件任务9 数组应用特效1任务9 数组应用特效2设计初始界面，一个段落、两个按钮3n观察随机点名小案例运行效果，需要考虑的问题：u需要选取的名单如何存储？如果除了姓名之外，又加上学号信息呢？ujs中使用哪个对象的哪个方法产生随机数？随机数的范围如何？如何产生0-10之间的随机整数？u点击启动按钮时，如何做到每间隔10秒钟产生一个随机数（抽取一个姓名）？u抽取的姓名如何显示在页面中？u点击“stop”按钮时，如何停止定时器？4n使用new关键字和构造函数Array()uvar arr=new Array(赵楠,张三水,牛三金,原文武,高朋鸟,陈志强,刘振梅);uarr8=张可可;可以使用这种方式新增元素，此时arr7没有定义n使用方括号直接定义数组uvar arr=赵楠,张三水,牛三金,原文武,高朋鸟,陈志强,刘振梅;n获取数组元素的个数uvar len=arr.length;5nJS中需要使用Math对象的random()函数产生随机数uMath.random()产生0-1之间的随机数，返回值包含0，不包含1nJS中的取整问题uMath.floor(x)：返回小于等于x的最大整数uMath.round(x)：对x进行四舍五入取整uMath.ceil(x)：返回大于等于x的最小整数n如何产生0,10范围的随机整数？n如何产生10,20范围的随机整数？6n获取启动按钮，设置click事件函数n在函数内部，使用循环定时器（返回定时器标识timer）设置每间隔10毫秒产生一个与姓名数组长度有关的随机数，抽取一个姓名，将选取的内容设置为段落的新内容u抽取的姓名，可以作为段落的内容n获取停止按钮，设置click事件函数u结束循环定时器7n按照前面的思路写出的代码中的问题u允许反复重新点击“start”按钮，导致无法通过“stop”按钮结束随机选择过程，如何禁止这种操作？u若是没有“stop”按钮，如何修改程序，做到随机选择100次之后自动停止定时器u如果在学生信息中增加学号，如何定义数组？如何同时显示学号和姓名信息？8设计初始界面：大小两幅图（div+图片）两个按钮定义数组，保存所有图片的名称9n开始按钮的处理函数内容u启用循环定时器（返回标识timer），每过20秒钟执行一次匿名函数，函数体内容 随机产生数组的一个下标（0-6范围的整数） 在小图片框中显示下标对应的图片（使用prop()方法设置src属性值）n停止按钮的处理函数内容u停止循环定时器u隐藏大图片框中原来的图片（图片.hide()）u设置大图片框中显示下标对应的图片，并在1秒钟内显示图片（设置属性src之后，直接通过链式语法设置show(1000)）10n存在的问题：u初始时能够点击“停止”，初始图片隐藏又显示u能够反复点击“开始”，导致无法停止n解决方案：u初始时禁用“停止”，启用“开始”u在“开始”按钮处理函数中，禁用“开始”，启用“停止”u在“停止”按钮处理函数中，禁用“停止”，启用“开始”u启用：prop(disabled,false)u禁用：prop(disabled,true)这里之所以不使用timer=null方式禁止反复点击，是因为这只能停止定时器，此时点击停止按钮仍旧隐藏和显示当前图片，所以使用禁用按钮的方式禁止反复点击开始11本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 12