1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 div {
11 width: 800px;
12 height: 40px;
13 border: 1px solid #000;
14 margin: 30px auto;
15 }
16 </style>
17 </head>
18
19 <body>
20 <!-- 页面搞一个div w800 h40 b1实黑 margin 30 auto -->
21 <div></div>
22 <script>
23 let divObj = document.querySelector("div")
24 let pageTag = {
25 first: '首页',
26 prev: '上一页',
27 list: null,
28 next: '下一页',
29 last: '末页',
30 };
31
32 // page 分页、 total 总、data 数据
33 let pageInfo = {
34 pageNum: 6, // 当前页数
35 pageSize: 10, // 每页显示条数
36 totalData: 1000, // 总条数
37 totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
38 }
39 pageInfo.totalPage = Math.ceil(pageInfo.totalData / pageInfo.pageSize)
40 showTag()
41 //div 设置为弹性盒
42 divObj.style.display = "flex"
43 divObj.style.justifyContent = "center"
44 divObj.style.alignItems = "center"
45
46 //分页标签
47 function showTag() {
48
49 //遍历对象创建和添加节点通过核心
50 // DOM语法创建p标签 最终在页面追加（ createElement createTextNode appendChild）
51 for (var item in pageTag) {
52 // 创建标签
53 let p = document.createElement("p")
54 if (item == "list") {
55 pageTag.list = p
56 } else {
57 // 创建文本
58 const text = document.createTextNode(pageTag[item])
59 //追加文本
60 p.appendChild(text)
61 // 设置标签对象样式
62 p.style.border = "1px solid #000"
63 p.style.margin = "0 5px"
64 p.style.padding = "0 5px"
65
66 }
67 // 追加到div
68 divObj.appendChild(p)
69 console.log(divObj)
70 // console.log(pageTag.list)
71 // showNum()
72 }
73 // 禁用
74 var divTag = divObj.querySelectorAll("p")
75 console.log(divTag)
76 if (pageInfo.pageNum == 1) {
77 divTag[0].style.background = "#ccc"
78 divTag[1].style.background = "#ccc"
79 }
80 if (pageInfo.pageNum == pageInfo.totalPage) {
81 divTag[3].style.background = "#ccc"
82 divTag[4].style.background = "#ccc"
83 }
84 showNum()
85
86 }
87 // showNum()
88
89 //封装创建null p
90 // var listObj = pageTag.list
91
92 function creatP(i, tag = "p") {
93 // divObj.innerHTML = ""
94 // 步骤1：创建p标签里面写数字（createEle ment、createTextNode、appendChild）
95 const p = document.createElement(tag)
96 console.log(p)
97 const text = document.createTextNode(i)
98 p.appendChild(text)
99
100 console.log(p.innerText)
101 // 步骤3：给p标签设置样式 border margin padding （注：同之前的p）
102 if (tag != "span") {
103 p.style.border = "1px solid #000"
104 p.style.margin = "0 5px"
105 p.style.padding = "0 5px"
106 }
107
108 // 步骤4：追加到null标签对象里面
109
110 divObj.appendChild(p)
111 console.log(pageTag.list)
112
113 // // 步骤5：设置默认选中效果
114 if (i == pageInfo.pageNum) {
115 p.style.background = "orange"
116 }
117 }
118 //标签对象的数据
119 function showNum() {
120
121
122 // // 步骤0：获取null标签对象，
123 // var listObj = pageTag.list
124 //设置listObj 为弹性盒
125 pageTag.list.style.display = "flex"
126 pageTag.list.style.justifyContent = "center"
127 pageTag.list.style.alignItems = "center"
128 //控制点
129 if (pageInfo.totalPage < 10) {
130 for (j = 1; j <= pageInfo.totalPage; j++)
131 creatP(j)
132
133 } else {
134 // //额外规律：思考如果你的数据只有2页有意义加点吗？
135 // 回答：没有，至少10页
136 // pageNum < 5 1 2 3 4 5...99 100
137 if (pageInfo.pageNum < 5) {
138 for (let i = 1; i <= 5; i++) {
139 creatP(i)
140 }
141 creatP("...", "span");
142 creatP(pageInfo.totalPage - 1)
143 creatP(pageInfo.totalPage)
144 } else if (pageInfo.pageNum == 5) {
145 // pageNum == 5 1 2 3 4 5 6 7...99 100
146 for (let i = 1; i <= 7; i++) {
147 creatP(i)
148 }
149 creatP("...", "span");
150 creatP(pageInfo.totalPage - 1)
151 creatP(pageInfo.totalPage)
152 } else if (pageInfo.pageNum > 5 && pageInfo.pageNum < pageInfo.totalPage - 4) {
153 // pageNum > 5 && pageNum < 总页数 - 4 1 2...左2个 pageNum 右边2个...99 100
154 creatP(1)
155 creatP(2)
156 creatP("...", "span")
157 for (i = pageInfo.pageNum - 2; i <= pageInfo.pageNum + 2; i++) {
158 creatP(i)
159 }
160 creatP("...", "span")
161 creatP(99)
162 creatP(100)
163
164 } else if (pageInfo.pageNum == pageInfo.totalPage - 4) {
165 // pageNum == 总页数 - 4 1 2......后5五
166 // pageNum > 总页数 - 4 1 2......后5五
167 creatP(1)
168 creatP(2)
169 creatP("...", "span")
170 creatP("...", "span")
171 for (i = 0; i <= 4; i++) {
172 creatP(pageInfo.pageNum + i)
173 }
174
175 } else if (pageInfo.pageNum > pageInfo.totalPage - 4) {
176 // pageNum == 总页数 - 4 1 2......后5五
177 // pageNum > 总页数 - 4 1 2......后5五
178 // if()
179 creatP(1)
180 creatP(2)
181 creatP("...", "span")
182 creatP("...", "span")
183 for (i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) {
184 creatP(i)
185 }
186
187 }
188
189
190 }
191 }
192 </script>
193 </body>
194
195 </html>
