js面向过程分页功能

  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>
js面向过程 分页功能

猜你喜欢

js面向过程分页功能
