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. 删除商品

点击商品后面的删除能够删除商品