js下 Day18、综合案例

一．分页

效果图:

功能思路分析:

分页就是将所有的数据按指定条数分成若干份: 假如有24条数据，每页只显示5条，则需要分成Math.ceil(24 / 5) = 5页; 每次只显示1页数据，所以需要在总数据中利用slice截取出1页数据渲染

每一页的数据分布如下:

第一页: 显示1 - 5条数据 截取 data.slice(0,5)

第二页: 显示6 - 10条数据 截取 data.slice(5,10)

第三页: 显示11 - 15条数据 截取 data.slice(10,15)

总结:

截取数据的开始下标为 : **( ** 页码-1)*条数

截取数据的结束下标为 : 开始下标+条数

1. 面向对象框架

2. 数据渲染

\1. 封装一个render()方法写渲染，每次渲染的数据不同，通过传参获取

\2. 通过**map().join(‘’)**渲染到指定盒子中

**3. ** 页码渲染

1.封装一个**renderPage()**方法，拿到总页码，总页码 = 数据总条数/每页条数

2.使用for循环渲染页码

3.设置当前页码高亮

**4. ** 页码切换

1.在各种事件中，都需要根据截取的数据，重新调用渲染数据和渲染页码方法，所以封装一个公用的use方法集中调用

2.给页码大盒子绑定点击事件，利用事件委托找到每一个切换分页按钮

3.点击下一页，当前页码++，最大限定，调用渲染方法，传递下一页数据

4.点击上一页，当前页码--，最小为1，调用渲染方法，传递上一页数据

5.点击分页器，当前页码 = 事件源.innerHTML，调用渲染方法，传递数据

5. 条数切换

给条数下拉列表绑定change事件，改变后重新调用渲染，修改当前页码为1

6. 排序

1.给排序下拉列表绑定change事件,使用sort()方法进行排序

2.根据下拉列表的value值进行排序

3.等级是字母需要利用charCodeAt()转码后排序

4.排序后重新调用渲染方法

7. 模糊搜索

\1. 给文本框绑定失去焦点事件blur，根据文本框的内容去筛选数据(filter())

\2. 根据筛选后的数据重新调用渲染方法

#二．今日小结

\1. 分页中截取数据的开始下标为 : **( ** 页码-1)*条数

\2. 分页中截取数据的结束下标为 : 开始下标+条数

\3. 分页中获取页码: Math.ceil(总条数/每页条数)

\4. 数组方法: **filter() ** 筛选 slice()截取 sort()排序

\5. 查找字符串返回布尔值: includes()

#三．作业 -- 楼层

效果图:

功能思路分析:

\1. 自己模拟数据，渲染菜单和列表（每道菜的信息需要包括：图片，标题，价格）

\2. 点击每一道菜出现弹窗，弹窗内显示对应的图片、菜名和价钱（渐隐渐现的动画效果，通过修改opacity实现）

\3. 弹框是用面向对象封装好的，此处只需要new实例化调用

\4. 点击价格，按照价格从高到低对数据进行排序（sort()）

\5. 再次点击，按照价格从低到高进行排序