作业 01 :广告图片轮播切换 作业来源: 网易云音乐 作业效果: 页面打开初始状态时,如图 3-16 所示。 作业描述: 固定区域循环播放一组图片(幻灯片效果),下部圆形分页标签随着播放不同的图片,而对应改变样式。 思路分析: (1) 利用动态面板添加多个状态,每个状态中放置不同的图片。 (2) 将圆点分页标签做成只能唯一被选中的效果,并设置第一个圆点默认被选中。 (3) 每次切换到新的图片时,根据状态名称选中圆点分页标签,呈现深红颜色效果。 作业 02 :元件样式联动 作业来源: 京东 - 商品列表项 作业效果: (1) 初始及鼠标离开时,如图 3-17 所示。 (2) 鼠标移入时,如图 3-18 所示。 作业描述: 鼠标进入“对比” / “关注” / “加入购物车”的按区域时,图标、文字与背景都呈现另一种形式。其中,“关注”按中的图标在鼠标进入时,红色心形图标为向上滑动显示,鼠标离开时,向下滑动消失。 思路分析: (1) 鼠标进入每个按区域,改变图标、边框和文字颜色。 (2) 文字靠右,距离边框有一定距离。 (3) 鼠标移动图标或者矩形时呈现鼠标悬停的效果。 (4) 鼠标进入“关注”按时,红心图标呈现向上滑入效果,离开时,再现向下滑动效果。 作业 03 :实现倒计时 作业来源: 豆瓣 APP 作业效果: (1) 初始页面如图 3-19 所示。 (2) 在 3-19 所示页面中,手机号输入框获得焦点时,旁边显示叉按,单击叉按,可清除已输入的数字;手机号不为空时,启用“下一步”按,否则禁用“下一步”按。单击“下一步”按,需验证手机号是否为合法手机号(长度为 11 ,均为数字);是否已绑定;根据情况弹出相应提示;如果验证成功,弹出图 3-20 页面。 (3) 在图 3-20 所示页面中,需显示上一页输入的手机号,同时倒计时输入验证码;并对输入的验证码进行合法性判断,如不能为空;不能小于 4 位等,并给出相应提示;如果验证码正确,则启用“绑定”按。 思路分析: (1) 图 3-19 页面的设计,主要是手机号的验证,输入框的文字改变时,判断手机号位数是否达到 11 位,是的话启用“下一步”按。下一步按的单击事件,需判断手机号是否为合法字符,不是的话弹出提示:“请填写正确的手机号”;还需判断手机号是否已注册(和全局变量中的手机号比较),如果注册过,弹出提示:“此手机号已绑定”。 2 个错误提示可分别放在动态面板的两个状态中。 (2) 图 3-20 页面设计的关键是,要有一个能够倒计时的动态面板,设置该面板载入时每隔一秒循环切换状态,状态改变时,计时数字减少一个。 (3) 启用“绑定”按后,单击绑定按,需判断输入的验证码是否为 4 位且是否为指定发送的验证码,如果不是,弹出提示:“验证码输入错误或已过期”。 (4) 无论是手机号还是验证码输入框,获得焦点时均会显示数字按面板。 实验三课后作业素材下载: 课后作业素材.zip