js面向过程 分页功能
Posted yueyuez
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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面向过程 分页功能的主要内容，如果未能解决你的问题，请参考以下文章