js下 Day19、综合案例
一.吸顶楼层
效果图:
功能思路分析:
1. 面向对象框架
2. 渲染导航
\1. 数据
\2. 对象结构的数据用for in遍历
\3. 渲染时将属性名设为锚点(a标签的href)
3. 渲染车系
\1. 车系分类是对象的数据结构,外层渲染用for in
\2. 每个分类的内容是数组的数据结构,内层渲染map().join(‘’)
\3. 渲染时将每个字母的分类设为id名,配合导航里的锚点
4. 导航吸顶
\1. 绑定滚动事件(window.addEventListener(‘scroll’,fn))
\2. 获取滚动距离( document.documentElement.scrollTop || document.body.scrollTop)
\3. 判断滚动距离是否大于导航的offsetTop
\4. 是则变成固定定位( fixed ),否则取消固定定位(static)
5. 楼层滚动
\1. 滚动事件中,拿到每一层楼的offsetTop 跟 滚动距离比较
\2. 滚动距离大于楼层的offsetTop则当前楼层对应的导航高亮
#二.星级评分
效果图:
功能思路分析:
1. 面向对象框架
2. 星级评分
\1. 为所有的小星星绑定mouseover事件:
\2. 将经过的那一个及之前的所有小星星变为红色,将之后的小星星变为灰色
\3. 为所有的小星星绑定mouseout事件:
\4. 获取当前选中的星星的下标,获取父元素的自定义属性(getAttribute())
\5. 如果有选中的小星星,则将选中星星及之前的小星星显示为红色,之后的显示为灰色
\6. 如果没有选中的小星星,则将所有的小星星变为灰色
\7. 为所有的小星星绑定click事件:
\8. 将点击的那一个及之前的所有小小变为红色,将之后的小星星变为灰色
并给父元素添加一个自定义属性(setAttribute()),存储点击的这颗小星星的下标
3. 选中标签
点击标签,选中高亮,再次点击取消选中状态**(classList.toggle())**
4. 添加标签
\1. 点击提交按钮,创建节点( document.createElement() )
\2. 设置内容为文本框的value值
\3. 追加到ul中**(添加节点appendChild() )**
5. 字数统计功能
1. 给文本框绑定input事件
\2. 获取它的value值,将value用正则将汉字替换成两个单字节字符,replace(/[\u4e00-\u9fa5]/g,‘aa’)
\3. 替换后获取字符的个数,即length
\4. 用140-length为还可以输入的字数显示到页面中
#三.今日小结
\1. 滚动事件: **window.addEventListener( ** ‘scroll’)
\2. 滚动距离: document.documentElement.scrollTop || document.body.scrollTop
\3. 鼠标事件**: mouseover滑过 mouseout离开**
\4. 中文正则: /[\u4e00-\u9fa5]/
\5. 创建节点: document.createElement()
\6. 追加节点: 父元素.appendChild()
#四.作业 -- 购物车
效果图:
功能思路分析:
1. 模拟数据
2. 渲染数据
3. 产品数量加减
通过事件委托给购物车大盒子绑定点击事件,判断事件源,实现商品数据加减,商品数量加减的同时,后面的小计跟着变化
4. 商品选中
单个商品选中后计算总计
5. 总计方法
\1. 封装一个总计方法
\2. 拿到所有被选中的商品的数量累加在一起
\3. 拿到所有被选中的商品的价格累加在一个
\6. 删除商品
点击商品后面的删除能够删除商品