《移动应用设计与开发-前端开发》课件-9 案例应用

JavaScript脚本语言案例应用目录9.2图片手动轮换9.1表格添加删除9.4模仿红绿灯9.3图片自动轮换9.6复选框应用9.5选项卡9.7移动的小球9.8选号器9.9随机飘雪9.10滚动新闻JavaScript脚本语言案例—表格添加删除案例—表格添加删除导入讲解演练总结实践案例效果：案例分析：编写HTML，设计表格单击添加按钮，创建行节点，列节点，列节点的内容是学号和姓名文本框的内容将列节点添加到行将行节点添加到表格，完成添加功能定义删除事件，删除当前行打开hbuilder效果演示案例—表格添加删除导入讲解演练总结实践定义变量，获取页面元素创建行节点，第一列节点，设置第一列节点的内容是学号文本框的值。将第一列节点添加到行删除功能的实现创建第二列，第三列，并添加到行将行添加到表格导入讲解演练总结实践案例—表格添加删除

内容小结重点：掌握节点创建，添加，删除操作对策一案例—表格添加删除导入讲解演练总结实践课后练习实现表格添加删除案例JavaScript脚本语言案例—图片手动轮换案例—图片手动轮换导入讲解演练总结实践案例效果：案例分析：编写HTML，页面中放置一张图片将图片的地址存入数组中单击下一张时，改变图片的src属性，从而达到显示下一张图片的目的。变量判断，如果到达最后一张，返回第一张打开hbuilder效果演示案例—图片手动轮换导入讲解演练总结实践定义变量，获取页面元素定义变量，用于控制次数定义数组，存储图片路径上一张功能实现，思路同下一张下一张的单击事件，变量自增。如果变量的值超过了图片的数量，返回第一张。设置图片的src属性为数组的值导入讲解演练总结实践案例—图片手动轮换

内容小结手动图片轮换效果对策一案例—图片手动轮换导入讲解演练总结实践课后练习实现图片手动轮换案例JavaScript脚本语言案例—图片自动轮换案例—图片自动轮换导入讲解演练总结实践案例效果：案例分析：定时器函数达到自动切换的效果增加底部小圆点功能，小圆点的样式表示当前播放到哪一张打开hbuilder效果演示案例—图片自动轮换导入讲解演练总结实践定义变量，获取页面元素使用定时器函数，实现自动轮换功能定义自动播放函数导入讲解演练总结实践案例—图片自动轮换

内容小结图片自动轮换效果对策一案例—图片自动轮换导入讲解演练总结实践课后练习实现图片自动轮换案例增加小圆点控制图片功能JavaScript脚本语言案例—红绿灯效果案例—红绿灯效果导入讲解演练总结实践案例效果：案例分析：红灯亮3秒后，绿灯亮，绿灯亮3秒后，黄灯亮使用两个变量控制，一个控制秒数，一个控制灯样式变化可以通过函数实现打开hbuilder效果演示案例—红绿灯效果导入讲解演练总结实践定义变量，获取页面元素使用定时器函数，实现计时和交替功能定义函数，用于设置div的背景定义函数，实现三个“灯”之间的切换导入讲解演练总结实践案例—红绿灯效果

内容小结红绿灯效果知识点：定时器函数setInterval（）自定义函数应用Switch语句等对策一案例—红绿灯效果导入讲解演练总结实践课后练习实践红绿灯效果案例JavaScript脚本语言案例—选项卡效果案例—选项卡效果导入讲解演练总结实践实际应用：新浪首页搜狐首页京东首页案例—选项卡效果导入讲解演练总结实践案例效果：案例分析：四个选项对应四个div，鼠标放到哪个选项上，对应的div显示，其余的隐藏className应用打开hbuilder效果演示案例—选项卡效果导入讲解演练总结实践定义变量，获取页面元素清空所有选项的样式，清空所有内容的样式为当前选项和内容添加样式导入讲解演练总结实践案例—选项卡效果

内容小结选项卡效果知识点：className应用For循环的应用对策一案例—选项卡效果导入讲解演练总结实践课后练习实践选项卡效果案例JavaScript脚本语言案例—复选框应用案例—复选框应用导入讲解演练总结实践案例效果：案例分析：全选复选框控制线下其他复选框。其他复选框的状态同全选复选框状态一致。（一个控制多个）其他复选框控制全选框（多个控制一个），多个复选框中只要有一个没有选中，全选复选框就不能选中。所有的都选中后，全选复选框处于选中状态，通过定义函数来判断。复选框的状态可以通过属性checked设置。打开hbuilder效果演示案例—复选框应用导入讲解演练总结实践定义函数，用于判断其他复选框的状态多个控制一个一个控制多个导入讲解演练总结实践案例—复选框应用

内容小结数组应用循环应用自定义函数对策一案例—复选框应用导入讲解演练总结实践课后练习实践复选框应用案例，增加反选功能JavaScript脚本语言案例—移动的小球案例—移动的小球导入讲解演练总结实践案例效果：案例分析：使用div通过样式设置来模拟小球，注意，必须要设置定位属性。通过改变div的left属性达到移动效果。当前div的left属性值要使用offsetLeft属性获取。使用定时器函数，达到持续移动的效果。打开hbuilder效果演示案例—移动的小球导入讲解演练总结实践定义变量，获取元素，定义初始速度定义函数move，通过判断div的left值，决定是向左还是向右移动启动定时器，div移动导入讲解演练总结实践案例—移动的小球

内容小结offsetLeft属性的使用定时器的使用对策一案例—移动的小球导入讲解演练总结实践课后练习实践移动的小球案例，增加功能，改变小球的移动路线JavaScript脚本语言案例—选号器案例—选号器导入讲解演练总结实践案例效果：案例分析：元素内容的获取，设置使用innerHTML属性产生某一个范围内的随机数启动定时器，达到出现随机数的效果。打开hbuilder效果演示随机数公式：Math.floor(Math.random()*总数+初始值)案例—选号器导入讲解演练总结实践定义变量，获取元素，定义时钟t启动定时器停止定时器定时器函数，产生随机数导入讲解演练总结实践案例—选号器

内容小结Math对象的应用定时器的使用对策一案例—选号器导入讲解演练总结实践课后练习实现随机抽奖案例JavaScript脚本语言案例—随机飘雪案例—随机飘雪导入讲解演练总结实践案例效果：案例分析：创建节点，设置节点样式，追加到页面中获取节点，实现节点的移动判断节点的位置，当节点移动到某一个位置时，要新增节点。超出窗口后删除节点。打开hbuilder效果演示案例—随机飘雪导入讲解演练总结实践1：创建一片雪花，大小，位置随机2：生成很多雪花4.启动定时器，每隔30毫秒，雪花移动一次，超过某个高度后新增一片雪花，雪花移出窗口后删除3.定义函数，获取所有雪花，位置移动导入讲解演练总结实践案例—随机飘雪

内容小结节点的创建添加删除Math对象的应用定时器的使用offsetTop属性应用对策一案例—随机飘雪导入讲解演练总结实践课后练习实现随机飘雪案例JavaScript脚本语言案例—滚动新闻案例—滚动新闻导入讲解演练总结实践案例效果：案例分析：使用无序列表ul，li布局页面。ul的高度是一个li的高度。超出部分隐藏复制ul的第一个子节点，追加到末尾，然后删除第一个子节点。使用定时器函