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
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
随机推荐
- 微信小程序期末复习
过什么六一,复习不完了... 第1章作业 一.单选题(共10题,100.0分) 1以下哪个不是主流的手机操作系统? A.Android B.iOS C.Windows Phone D.Blackber ...
- 简单的登录验证小程序_python
一.要求 输入用户名密码,验证成功之后显示欢迎信息,输错三次后锁定. 程序: #!/usr/bin/env python# _*_ coding:utf-8 _*_#Author:chenxz #将黑 ...
- Failed to restart docker.service: Unit not found 镜像加速
解决方案 以前的安装残留 重新安装 find / -name "docker*" centos8 添加软件源信息 yum-config-manager --add-repo htt ...
- Unable to create initial connections of pool. spring boot mysql
Unable to create initial connections of pool. 在链接url里添加 将useSSL=true改为useSSL=false 只能说明服务器没有打开SSL功能
- PP: Deep r -th Root of Rank Supervised Joint Binary Embedding for Multivariate Time Series Retrieval
from: Dacheng Tao 悉尼大学 PROBLEM: time series retrieval: given the current multivariate time series se ...
- PHP实现导出CSV文件
在做导出一个信息表为excel文件这个功能完成之后,自己用得好好的,但是到HR那边就告诉我导出的文件无法用她电脑上的office打开,心想,兼容没做好,想问下她的版本号,结果半天没回复消息.我老大来了 ...
- 2020牛客寒假算法基础集训营3 G.牛牛的Link Power II （树状数组维护前缀和）
https://ac.nowcoder.com/acm/contest/3004/G 发现每个“1”对于它本身位置产生的影响贡献为0,对前面的“1”有产生贡献,对后面的"1"也产生 ...
- Docker之设置加速器
在Docker从仓库下载镜像是非常慢的,所以今天搞一个Docker设置加速器教程. 1. 创建一个Docker的配置文件. sudo vim /etc/docker/daemon.json 2. 编写 ...
- 01 : Java入门
Java概述 Java之父·詹姆斯·高斯林(James Gosling) 1977年获得了加拿大卡尔加里大学计算机科学学士学位,1983年获得了美国卡内基梅隆大学计算机科学博士学位,毕业后到IBM工作 ...
- python 处理protobuf协议
背景:需要用django基于python3模拟一个http接口,请求是post方式,body是protobuf string,返回也是protobuf string 设计:django获取pb str ...