js面向过程 分页功能
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 800px;
height: 40px;
border: 1px solid #000;
margin: 30px auto;
}
</style>
</head> <body>
<!-- 页面搞一个div w800 h40 b1实黑 margin 30 auto -->
<div></div>
<script>
let divObj = document.querySelector("div")
let pageTag = {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
}; // page 分页、 total 总、data 数据
let pageInfo = {
pageNum: 6, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}
pageInfo.totalPage = Math.ceil(pageInfo.totalData / pageInfo.pageSize)
showTag()
//div 设置为弹性盒
divObj.style.display = "flex"
divObj.style.justifyContent = "center"
divObj.style.alignItems = "center" //分页标签
function showTag() { //遍历对象创建和添加节点通过核心
// DOM语法创建p标签 最终在页面追加（ createElement createTextNode appendChild）
for (var item in pageTag) {
// 创建标签
let p = document.createElement("p")
if (item == "list") {
pageTag.list = p
} else {
// 创建文本
const text = document.createTextNode(pageTag[item])
//追加文本
p.appendChild(text)
// 设置标签对象样式
p.style.border = "1px solid #000"
p.style.margin = "0 5px"
p.style.padding = "0 5px" }
// 追加到div
divObj.appendChild(p)
console.log(divObj)
// console.log(pageTag.list)
// showNum()
}
// 禁用
var divTag = divObj.querySelectorAll("p")
console.log(divTag)
if (pageInfo.pageNum == 1) {
divTag[0].style.background = "#ccc"
divTag[1].style.background = "#ccc"
}
if (pageInfo.pageNum == pageInfo.totalPage) {
divTag[3].style.background = "#ccc"
divTag[4].style.background = "#ccc"
}
showNum() }
// showNum() //封装创建null p
// var listObj = pageTag.list function creatP(i, tag = "p") {
// divObj.innerHTML = ""
// 步骤1：创建p标签里面写数字（createEle ment、createTextNode、appendChild）
const p = document.createElement(tag)
console.log(p)
const text = document.createTextNode(i)
p.appendChild(text) console.log(p.innerText)
// 步骤3：给p标签设置样式 border margin padding （注：同之前的p）
if (tag != "span") {
p.style.border = "1px solid #000"
p.style.margin = "0 5px"
p.style.padding = "0 5px"
} // 步骤4：追加到null标签对象里面 divObj.appendChild(p)
console.log(pageTag.list) // // 步骤5：设置默认选中效果
if (i == pageInfo.pageNum) {
p.style.background = "orange"
}
}
//标签对象的数据
function showNum() { // // 步骤0：获取null标签对象，
// var listObj = pageTag.list
//设置listObj 为弹性盒
pageTag.list.style.display = "flex"
pageTag.list.style.justifyContent = "center"
pageTag.list.style.alignItems = "center"
//控制点
if (pageInfo.totalPage < 10) {
for (j = 1; j <= pageInfo.totalPage; j++)
creatP(j) } else {
// //额外规律：思考如果你的数据只有2页有意义加点吗？
// 回答：没有，至少10页
// pageNum < 5 1 2 3 4 5...99 100
if (pageInfo.pageNum < 5) {
for (let i = 1; i <= 5; i++) {
creatP(i)
}
creatP("...", "span");
creatP(pageInfo.totalPage - 1)
creatP(pageInfo.totalPage)
} else if (pageInfo.pageNum == 5) {
// pageNum == 5 1 2 3 4 5 6 7...99 100
for (let i = 1; i <= 7; i++) {
creatP(i)
}
creatP("...", "span");
creatP(pageInfo.totalPage - 1)
creatP(pageInfo.totalPage)
} else if (pageInfo.pageNum > 5 && pageInfo.pageNum < pageInfo.totalPage - 4) {
// pageNum > 5 && pageNum < 总页数 - 4 1 2...左2个 pageNum 右边2个...99 100
creatP(1)
creatP(2)
creatP("...", "span")
for (i = pageInfo.pageNum - 2; i <= pageInfo.pageNum + 2; i++) {
creatP(i)
}
creatP("...", "span")
creatP(99)
creatP(100) } else if (pageInfo.pageNum == pageInfo.totalPage - 4) {
// pageNum == 总页数 - 4 1 2......后5五
// pageNum > 总页数 - 4 1 2......后5五
creatP(1)
creatP(2)
creatP("...", "span")
creatP("...", "span")
for (i = 0; i <= 4; i++) {
creatP(pageInfo.pageNum + i)
} } else if (pageInfo.pageNum > pageInfo.totalPage - 4) {
// pageNum == 总页数 - 4 1 2......后5五
// pageNum > 总页数 - 4 1 2......后5五
// if()
creatP(1)
creatP(2)
creatP("...", "span")
creatP("...", "span")
for (i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) {
creatP(i)
} } }
}
</script>
</body> </html>
js面向过程 分页功能的更多相关文章
- js面向过程改写成面向对象--通用方法
响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...
- 使用原生js实现前端分页功能
背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...
- js面向过程-拖拽
1.步骤分析: 1.1 获取id 1.2 当鼠标点击时执行的js 1.3当鼠标移动时执行的js 1.4当鼠标放开时执行的js 2.代码实现 <!DOCTYPE html> <html ...
- js面向过程-经典选项卡
源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- [Ext JS 4] Grid 实战之分页功能
前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需 ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
- JS面向对象与面向过程
前言 面向对象编程: 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)--这个对象就称之为类 面向过程编程: 特点:封装,就是将你需要的功能放在一个对象里面 ------ ...
- 简单封装分页功能pageView.js
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
随机推荐
- 2级搭建类203-Oracle 19c SI ASM 静默搭建（OEL7.7）
Oracle 19c 单实例 ASM UDEV 方式在 OEL 7.7 上的安装
- jQuery---音乐导航
音乐导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- k8s service的四种类型
ClusterIp 默认类型,每个Node分配一个集群内部的Ip,内部可以互相访问,外部无法访问集群内部. NodePort 基于ClusterIp,另外在每个Node上开放一个端口,可以从所有的位置 ...
- 题解【洛谷P2264】情书
题面 看到每一单词在同一句话中出现多次感动值不叠加,一眼想到 \(\text{set}\). 首先将词汇列表中的单词存储起来,我用的是 \(\text{set}\). 对于每一个句子的单词,我们可以先 ...
- 并查集-D - 畅通工程
D - 畅通工程 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通 ...
- mysql行级锁 select for update
mysql行级锁 select for update 1.属于行级锁 2.where条件后需要写出明确的索引条件(如果有多个条件,可以建立联合索引) 3.如果其所在的事务提交或者回滚后,或者更新该条数 ...
- c++中vector函数
std::vector <cv::Point> VectorPoints 说明:首先定义一个Point(即Point2i---二维整型的点)类型的变量VectorPoints,这就是我们创 ...
- (原创)SpringBoot入门
本文章是SpringBoot入门的介绍在这里 我会尽量写一些细节性的东西,我用的是IDEA2016 Tomcat7 JDK1.8 Maven3.3.9 IDEA Tomcat JDK Maven ...
- Keep-Alive 以及服务器心跳
Keep-Alive 来源 :http://www.nowamagic.net/academy/detail/23350305 服务器心跳 来源 :http://www.cnblogs.com/lw ...
- 1052 Linked List Sorting (25分)
题目 1. 思路 使用map存放所有的地址对 使用起始地址遍历map,结果存放在vector中 排序vector 输出vector 2. 注意点 开始的时候起始地址为-1 可能有些节点没有用到,注意排 ...