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
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
随机推荐
- multiprocessing 方法解析：
以上是关于进程池的使用,截下来开始介绍如何使用多进程,由于multiprocessing 实现比concurrent.futures 实现更加底层这里还是推荐大家使用concurrent.future ...
- [CodeIgniter4]讲解-加载静态页
讲解 本教程旨在向您介绍CodeIgniter框架和MVC体系结构的基本原理.它将向您展示如何以逐步的方式构造基本的CodeIgniter应用程序. 在本教程中,您将创建一个基本的新闻应用程序.您将从 ...
- BZOJ-2424: [HAOI2010]订货【费用流】
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1487 Solved: 1002[Submit][Status][Discuss] Descript ...
- Java期末考试冲刺总结
经过长达将近三个小时的冲刺,我感觉身心俱疲,但它无法掩盖我敲代码的欲望! 三个小时我只实现了公文流转系统的的部分功能. 我深刻的意识到建民老师说的这套关系之复杂,它真的是太复杂了!!!没有系统的梳理, ...
- 杭电oj_2058——The sum problem（java实现）
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2058 思路:等差数列公式变形:sum = a1 * len + len *(len -1)/2 抽象成 ...
- （转） 统计在从1到n的正整数中1出现的次数
1. 题目描述 输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11和12,1一共出现了5次. 2. 题目来源 第一次看到是在 ...
- C++ stringstream用法（转）
一直觉得C++ iostream的cout输出比起printf差了太多,今天查c++字符串拼接的时候偶然看到原来还有stringstream这个类,还是挺好用的,该类位于<sstream> ...
- python 数组格式转换
格式转换 arr1 = [ {'name': 'jack', 'hobby': '西瓜'}, {'name': 'jack', 'hobby': '冬瓜'}, {'name': 'rose', 'ho ...
- moveTo 与 moveBy的区别 （转贴）
MoveTo和MoveBy可以使精灵移动,区别在于MoveTo是移动到给定的坐标点:而MoveBy是从当前坐标点移动给定的坐标点这么多的距离.举个例子,假定精灵当前的坐标点是(x, y),分别给Mov ...
- 训练20191009 2018-2019 ACM-ICPC, Asia East Continent Finals
2018-2019 ACM-ICPC, Asia East Continent Finals 总体情况 本次训练共3小时20分钟,通过题数4. 解题报告 D. Deja vu of - Go Play ...