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
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
随机推荐
- [POI2010] GIL-Guilds - 二分图染色,DFS
给一张无向图,要求你用黑白灰给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻:对于任意一个白点,至少有一个黑点与他相邻,对于任意一个灰点,至少同时有一个黑点和白点和灰点与他相邻,问能否成功 S ...
- 题解 AT3717 【[ABC081A] Placing Marbles】
题目传送门. 分析 我们可以把字符串中所有数加起来输出,那么到底怎么把一个字符变成一个数字呢.我们只需要减去字符\(0\)就可以了. 详细步骤 定义字符串\(s\)并将其输入. string s; c ...
- Redis03——Redis之单线程+多路IO复用技术
Redis 是单线程+多路IO复用技术 多路复用:使用一个线程来检查多个文件描述符的就绪状态 如果有一个文件描述符就绪,则返回 否则阻塞直到超时 得到就绪状态后进行真正的操作可以在同一个线程里执行,也 ...
- CSS的文本样式
CSS的文本样式 1.颜色 2.文本对齐方式 3.首行缩进 4.行高 5.装饰 1. 文本位置 居中: text-align: center; 靠左: text-align: left; 靠右: te ...
- [Python]find_all函数 2020.2.7
.find_all(name,attrs,recursive,string,**kwargs) name:对标签名称的检索字符串attrs:对标签属性值的检索字符串,可标注属性检索recursive: ...
- 杭电oj_2047——阿牛的EOF牛肉串（java实现）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2047 思路:先是列出了四个,但是没发现规律,然后开始画递归树,在其中找到了规律,算出递归式为f(n) ...
- 502. IPO（最小堆+最大堆法 or 排序法）
题目: 链接:https://leetcode-cn.com/problems/ipo/submissions/ 假设 力扣(LeetCode)即将开始其 IPO.为了以更高的价格将股票卖给风险投资公 ...
- python：运行command
#!/usr/bin/python# -*- coding:utf-8 -*- import os os.system('cocos jscompile -s ./dir1 -d ./dir2')
- 巨杉Tech | 使用 SequoiaDB 分布式数据库搭建JIRA流程管理系统
介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域.很多企业与互联网公司都在使用Jira作为内部 ...
- [object object]
第一个object代表用户自定义的对象的属性. 第二个object代表用户自定义的对象的方法. 是valueOf返回的一个字符串另外你打错了吧应该是[object Object]表示对象的类型是obj ...