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. 再次点击,按照价格从低到高进行排序
js下 Day18、综合案例的更多相关文章
- JS 下拉菜单案例
css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...
- js下 Day12、案例
一.垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 2. 鼠标移动 ( ...
- js下 Day11、案例
一.成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. ...
- Ext.js入门:常用组件与综合案例(七)
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- js上 二十、综合案例
二十.综合案例 题目一: **1. ** 数组随机 描述,写randomArray函数,传递一个数组,传递一个数值,返回一个指定个数的随机的新数组,不允许有重复数据 用例: randomArray([ ...
- js上 十九、综合案例
十九.综合案例 题目一: 封装一个函数equal(a1,a2),传入两个一维数组,判断两个数组是否包含相同的元素,如果相等,函数的返回值为true, 不相等,函数的返回值为false 1)例:arr1 ...
- JavaScript:综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- 黑马eesy_15 Vue:04.综合案例(前端Vue实现)
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
随机推荐
- 脑对u盘不识别的解决方法 一看就会
u盘可以说是我们日常生活中使用得较为频繁的移动硬盘了,它小巧轻便,便于携带,能够储存大量的文档.因为经常使用的关系,所以就会出现很多问题.比如电脑识别不了u盘怎么办? 接下来,小编想教大家几招面对u盘 ...
- img元素的联用
img元素的常用属性: src属性:资源地址 alt属性:当图片资源失效时,将出现该属性的设置的文字 最简单的联动: 和a元素联用(直接用a标签套) <a href="https:// ...
- leetcode 108 和leetcode 109 II
//感想:没啥上篇写完了 //思路:对于这道题109来说,就是数组变成了链表,其他没有变,我觉得非常不解,因为我想到的依旧是找中点,用快慢指针来找, 找到以后将链表分成两半,继续递归的去找,我就觉得这 ...
- [配置]01.IntelliJ IDEA代码格式化与Eclipse保持风格一致
- 如何解决vue2.0 打包之后 打开index.html出现空白页
如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...
- Kafka入门之consumer
offset存放在_consumer_offsets这个topic下 并且从0-49划分了50个分区: consumer会在kafka集群的所有broker中选择一个broker作为consumer ...
- 基于openeuler aarch_64 下,从源码的角度搭建Tensorflow
为什么从源码编译Tensorflow? 安装过的人们都知道如果 pip install tensorflow 的话会报错Your CPU supports instructions that this ...
- JZOJ8月15日提高组反思——2020年暑假终结篇
JZOJ8月15日提高组反思--2020年暑假终结篇 T1 仙人掌最短路 抱歉我只会最短路 仙人掌是啥? 听说是缩点+\(LCA\) 最短路30 T2 直接暴力计算 正解\(DP\) \(amazin ...
- golang拾遗:嵌入类型
这里是golang拾遗系列的第三篇,前两篇可以点击此处链接跳转: golang拾遗:为什么我们需要泛型 golang拾遗:指针和接口 今天我们要讨论的是golang中的嵌入类型(embedding t ...
- 什么是Python生成器?与迭代器的关系是什么?
生成器是一个特殊的迭代器,它保存的是算法,每次调用next()或send()就计算出下一个元素的值,直到计算出最后一个元素,没有更多的元素时,抛出StopIteration.生成器有两种类型,一种是生 ...