JS實作分頁功能

分頁在網頁上是一個很常見的功能，今天我們來實作一個新聞清單，包含了分頁的功能，效果如下：

那麼如何來實作這個功能呢？

一：html和css如下所示，就不多說了

html:

<!--新聞容器-->
<div class="new-main"></div>
<!--分頁容器-->
<div class="pagination-container">
    <span class="page-change prev">上一頁</span>
    <div class="pagination"></div>
    <span class="page-change next">下一頁</span>
</div>           

css:

body{

background-color: #f8f8f8;           

}

.new-main{

width: 40%;
margin: 100px auto 20px;
padding: 15px;
background-color: #fff;           

.new-main .item{

margin-bottom: 20px;           

.new-main .item-title{

text-align: left;
padding: 15px;
font-weight: bold;
font-size:18px;           

.pagination-container{

text-align: center;           

.pagination{

display: inline-block;           

.pagination a{

background-color: #999;
color: #fff;
padding: 1px 6px;
text-decoration:none;
border-radius: 5px;
margin-right: 10px;
cursor:pointer;           

.pagination a.active{

background-color: #85D1FF;           

.page-change{

margin: 0 15px;
cursor:pointer;           

.skip input{

width: 50px;           

二：JavaScript的實作

1，這是準備渲染新聞清單的資料

let newsData = [

{
title:'美國科技巨頭"花式勸退"老員工，數萬人丢掉飯碗',
content:'在數十年前稱霸業界的時代，IBM在美國的員勞工數曾一度增至25萬。'           

},

{
    title:'央視名嘴賀炜8連紅變彩神 命中11場比賽帶彩民緻富',
    content:'2019年8月1日，周中足彩比賽火熱進行中，在今天上午結束的兩場解放者杯比賽中'
},
{
    title:'53歲鞏俐為新戲現身女排集訓 緊盯郎平認真做筆記',
    content:'當天的鞏俐穿着非常普通，而且沒有化妝，看起來非常低調'
},
{
    title:'郎朗回應沒幫老婆拿行李：以後得多幫她提些',
    content:'郎朗與妻子吉娜·愛麗絲現身機場'
},
{
    title:'以身試菌”的瘋狂科學家',
    content:'幾十年來，主流學說一直認為胃潰瘍主要是由于壓力過大、吃太多辛辣食物和胃酸過多引起的。'
},
{
    title:'詹皇回應被噴:黑夠了吧 皇冠被玩弄太久我該爆發了',
    content:'他看兒子比賽時的激動反應被一些專家質疑“搶戲博關注”'
},
{
    title:'格裡芬：圍繞詹姆斯建隊很無趣 奪冠後就想離開',
    content:'從2014-2017，格裡芬在騎士隊完成了多筆出色的運作'
},
{
    title:' 《哪吒》票房超《瘋狂動物城》，位列中國影史動畫電影票房第一',
    content:'哪吒之魔童降世》的累積票房破15.28億，打破由《瘋狂動物城》保持的分賬票房15.27705億元累計綜合票房紀錄，登頂新冠軍。'
},
{
    title:' 濃眉哥赤膊苦練！訓練機器紀錄被打破，湖人二當家霸氣秀肌肉',
    content:'中原標準時間8月1日，濃眉哥繼續今夏的苦練'
},
{
    title:' 新疆男籃大外援人選确定 阿的江的選擇讓人意外！',
    content:'這兩天CBA似乎掀起了夏季轉會的高潮，包括遼甯男籃在内的沖冠集團都開始确定外援'
},
{
    title:' 喬家大院被摘牌後：晉中市委書記要求徹查整改，盡快再創5A',
    content:'山西省晉中市喬家大院景區在被文化和旅遊部取消旅遊景區品質等級次日，晉中市召開專題會議研究部署整改工作等。'
},
{
    title:' 大族雷射低開逾9% 股價創逾兩年新低',
    content:'大族雷射低開逾9%，股價創逾兩年新低。公司公告為董事長不當言論緻歉，同時公司稱歐洲研發中心項目主體建築已經建成，預計在2020年底竣工。'
},
{
    title:' 撿漏悍将！快船又更新，奪冠賠率第一超湖人，仍留位搶FMVP？',
    content:'中原標準時間8月2日，根據ESPN名記沃納洛夫斯基的報道，雷霆正式買斷了大前鋒帕特裡克·帕特森，而帕特森在過了澄清期之後計劃加盟快船。'
},
{
    title:' 又将有兩名NBA球員加盟CBA？其中一位還是勇士總冠軍成員',
    content:'中原標準時間8月1日，據國内媒體報道，遼甯隊主帥郭士強表示正在球隊考察小外援，前洛杉矶湖人隊球員蘭斯-史蒂芬森是候選人之一。'
}
           

];

2，擷取元素

let newMain = document.querySelector('.new-main');//新聞容器

let pagination = document.querySelector('.pagination');//分頁容器

let pageCount = Math.ceil(newsData.length/5); //根據資料的長度計算總共幾頁

let newsDataRender = [];//每頁要顯示的資料

let p = 1;//根據p值顯示每頁的資料

3，渲染初始化頁面

//渲染頁面函數

let render = ()=>{

newMain.innerHTML = ' ';           

newsDataRender = newsData.slice((p-1)5,5p); //每頁要顯示的資料,一頁顯示5條

newsDataRender.forEach((item,index)=>{

newMain.innerHTML += ` <div class="item">
<div class="item-title">${item.title}</div>
<div class="item-content">
    ${item.content}    </div>