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
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
随机推荐
- css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...
- Jmeter-第三方插件安装
1.插件下载 官方地址https://jmeter-plugins.org/install/Install/ 网盘地址链接: https://pan.baidu.com/s/1E4lnMWDGPWCN ...
- MySQL的排序(order by)
MySQL的排序(order by) 1.降序(DESC) 2.升序(ASC) 1. 降序(DESC) 完整代码: SELECT `学号`,`考试日期`,`考试成绩` FROM `表2`ORDER B ...
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（5.21.1.10-加-6.4）Atomic_Operations
5.21.1.10 Write Atomicity Normal 这个特性控制AWUN和NAWUN参数的操作.设置的属性值在set Feature命令的Dword 11中表明. 如果提交Get Fea ...
- 分类问题（三）混淆矩阵，Precision与Recall
混淆矩阵 衡量一个分类器性能的更好的办法是混淆矩阵.它基于的思想是:计算类别A被分类为类别B的次数.例如在查看分类器将图片5分类成图片3时,我们会看混淆矩阵的第5行以及第3列. 为了计算一个混淆矩阵, ...
- python 音频可视化
代码整理好放在 github 上了: https://github.com/darkchii/visualize bilibili 演示视频:https://www.bilibili.com/vide ...
- flaskapp
前置知识 https://blog.csdn.net/u013457794/article/details/88997699?depth_1-utm_source=distribute.pc_rele ...
- unittest框架下的HTMLTestRunner报告模块使用及优化
引言 在做接口自动化测试的时候,使用python单元测试框架unittest下HTMLTestRunner报告模板,可以很好的展示我们测试结果的数据. 官方的标准版模板地址:http://tungwa ...
- 二分-B - Dating with girls(1)
B - Dating with girls(1) Everyone in the HDU knows that the number of boys is larger than the number ...
- MySQL启动和停止
MySQL视为大仓库,关闭的时候有权限有身份都无法进入使用的时候要保持启用状态 方式一: 计算机游击找到“管理”打开 左侧栏目中找到“服务和应用程序”打开 打开服务 找到MySQL...,右击.... ...