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 is . 19 <body> 20 is <-! Page div w800 h40 b1 engage in a solid black 30 Auto margin -> 21 is <div> </ div> 22 is <Script> 23 is the let divObj = document.querySelector ( "div" ) 24 the let pageTag = { 25 First: 'Home' , 26 is PREV: 'Previous' , 27 List: null , 28 Next: 'next' , 29 Last: 'Last' , 30 }; 31 32 // Page tab, total total, data data 33 is the let PageInfo = { 34 is pageNum:. 6, // Pages 35 the pageSize: 10, // page number display bar 36 totalData: 1000, // total number of strips 37 [ TotalPage : 100, // total number = roundup (total number / number of pieces per page) 38 is } 39 pageInfo.totalPage = Math.ceil (pageInfo.totalData / pageInfo.pageSize) 40 showTag () 41 is // div set flexible pouch 42 is divObj.style.display = "Flex" 43 is divObj.style.justifyContent = "Center" 44 is divObj.style.alignItems = "Center" 45 46 is // tab labels 47 function showTag () { 48 49 // traverse the object created by the core and add nodes 50 // the DOM syntax to create p labels are added in the page (the createElement createTextNode the appendChild) 51 is for ( var Item in pageTag) { 52 is // create a label 53 is the let p = document.createElement ( "p" ) 54 is IF (Item == "List" ) { 55 = pageTag.list P 56 is } the else { 57 is // Create Text 58 const = text document.createTextNode (pageTag [Item]) 59 // append text 60 p.appendChild (text) 61 is // set the style label object 62 is p.style = .border "Solid 1px # 000" 63 p.style.margin = "0 5px" 64- p.style.padding = "0 5px" 65 66 } 67 // appended to the 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 // package p create null 90 // var listObj pageTag.list = 91 is 92 function creatP (I, tag = "p" ) { 93 // divObj.innerHTML = "" 94 // step 1: Create the p tag number written inside (createEle ment, createTextNode, appendChild) 95 P = const document.createElement (Tag) 96 the console.log (P) 97 const = text document.createTextNode (I) 98 p.appendChild (text) 99 100 the console.log (p.innerText) 101 // Step 3: to p tag set style border margin padding (Note: with previous p) 102 IF (tag = "span"! ) { 103 p.style.border = "Solid 1px # 000" 104 p.style.margin = "0 5px" 105 p.style.padding = "0 5px" 106 } 107 108 //Step 4: null label object is added to the inside 109 110 divObj.appendChild (P) 111 the console.log (pageTag.list) 112 113 // // Step 5: Set default selected effect 114 IF (I == pageInfo.pageNum) { 115 p.style.background = "Orange" 1 16 } 117 } 1 18 // data label object 119 function shownum () { 120 121 122 // // step 0: obtaining a null label object, 123 // var listObj = pageTag. List 124 // set listObj elastic cartridge 125 = pageTag.list.style.display "Flex" 126 pageTag.list.style.justifyContent = "Center" 127 pageTag.list.style.alignItems = "Center" 128 // control point 129 IF (pageInfo.totalPage <10 ) { 130 for (J = 1; J <= pageInfo.totalPage; J ++ ) 131 creatP (J) 132 133 } the else { 134 // // additional rule: If you think of only two meaningful data add it? 135 @ A: No, at least 10 136 // pageNum <2. 1. 5. 4. 3. 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 // pageno == ... 99 100 5 1 2 3 4 5 6 7 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 // pageno> 5 && pageno <总页数- 4 1 2 2 ...左个个pageno右边2 ... 99 100 154 creatP (1 ) 155 creatP (2 ) 156 creatP ( "...) 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 // pageno ==总页数- 4 1 2 5 ......后五 166 // pageno>总页数- 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 // pageno ==总页数- 4 1 2 5 ......后五 177 // pageno>总页数- 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>