Basic paging, consult the JS code on how to improve?-CodePudding

reference and activist in the BBS online help, achieve a basic paging,
first need not consider encapsulation and reuse cases, consult JS code base how to improve?

Thank you very much!
Here are all code,
 & lt; ! DOCTYPE html> 
 
<meta charset="utf-8" & gt; 
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt; 
<meta HTTP - equiv="X - UA - Compatible" content="ie=edge" & gt; 
 Go Coding!  
<style> 
* {
margin: 0; 
padding: 0; 
border: none; 
font-size: 12px; 
list-style: none; 
text-decoration: none; 
} 

Body {
padding: 20px; 
} 

The title {
The font - size: 36 px; 
Color: # f80; 
} 

. Title> Small {
The font - size: 24 px; 
Color: # CCC; 
Vertical - align: 4 px; 
} 

The tip # {
Color: # 999; 
} 

The emp {
Color: # f80; 
} 

. List> Li {
Padding: 6 px; 
Border - bottom: 1 px solid # eee; 
} 

The pagination {
Padding: 4 px; 
} 

Pagination a {
display: inline-block; 
Padding: 4 px 8 px; 
Color: # 00 c; 
} 

The pagination a.a ctive {
font-weight: bold; 
Color: # f80; 
background-color: #eee; 
} 

. Pagination. Tip # {
Margin: 0 0 0 10 px; 
} 
</style> 
 
<body> 
 
 
<script> 
Let data={
 https://bbs.csdn.net/topics/"A list" : [
{" id ": 1," title ": 2001}, 
{" id ": 2," title ": 2002}, 
{" id ": 3," title ": 2003}, 
{" id ": 4," title ": 2004}, 
5, {" id ":" title ": 2005}, 
{" id ": 6," title ": 2006}, 
{" id ": 7," title ": 2007}, 
{" id ": 8," title ": 2008}, 
{9, "id" : "title" : 2009}, 
{" id ": 10," title ": 2010}, 
11, {" id ":" title ": 2011}, 
12, {" id ":" title ": 2012}, 
13, {" id ":" title ": 2013}, 
] 
} 

Let the list=data. The list; 
The console. The log (` Data Length: ${list. Length} `); 

Pagination ({
"The current - page" : 1, 
"Page - size" : 1, 
}); 

The function pagination (par) {
Let pagination=document. QuerySelector (" pagination "); 
Let the listBox=document. QuerySelector (" list "); 
Let currentPage=par [" current - page "]; 
Let pageNums=par/" page - nums "| | 5. 
Let pageSize=par [" page - size "]; 
Let num=data. List. Length; 
Let totalPage=0; 

If (num/pageSize & gt; ParseInt (num/pageSize)) {
TotalPage=parseInt (num/pageSize) + 1; 
} else {
TotalPage=parseInt (num/pageSize); 
} 

Let sliceStart=(currentPage - 1) * pageSize; 
Let sliceEnd pageSize=currentPage *; 
SliceEnd=sliceEnd & gt; Num? Num: sliceEnd; 

Let dataSlice=data. List. Slice (sliceStart sliceEnd); 
Let listText=""; 
For (let the item of dataSlice) {
ListText +=` 
 
 The ${item. Id} - & lt;/small> The ${item. The title} & lt;/h5 & gt; 
 
`; 
} 

ListBox. InnerHTML=listText; 

Let htmlText=""; 
If (currentPage & gt; 1) {
HtmlText +=` 
Previous page 
 
`; 
} 

Let start=currentPage - Math. Floor (pageNums/2); 
Let the end=currentPage + Math. Floor (pageNums/2); 

If (end & lt; PageNums) {
End=pageNums; 
} 

If (end & gt; TotalPage) {
End=totalPage; 
} 

If (end - start!=pageNums - 1) {
Start=end - pageNums + 1; 
} 

If (start & lt; 1) {
Start=1; 
} 

For (the let I=start; i <=end; I++) {
HtmlText +=` 
The ${I} 
 
`; 
} 

If (currentPage & lt; TotalPage) {
HtmlText +=` 
The next page 
 
`; 
} 

HtmlText +=` & lt; Span & gt; /${totalPage} & lt;/span> `; 
Pagination. InnerHTML=htmlText; 
} 
</script>