JS 分页器

2022-03-04 16:31:06 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <ul class="newsList">
        </ul>
        <!-- 分页器 -->
        <div class="pageLists">
            <button id="first">首页</button>
            <button id="pageList_prev">上一页</button>
            <div class="pageList"></div>  
            <button id="pageList_next">下一页</button>
            <button id="last">尾页</button>
        </div>
    </div>
</body>
<style>
*{
    margin: 0;
    padding: 0;
}
.box{
    width: 600px;
    height: 400px;
    margin: 100px auto;
}
.newsList{
    width: 600px;
    height: 350px;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.newsList li{
    height: 80px;
    width: 500px;
    list-style: none;
    background-color: skyblue;
}
.newsList li span:nth-of-type(1){
    font-size: 30px;
    font-weight: 600;
}
.pageLists{
    width: 600px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
}
.pageLists button{
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;
}
.pageList{
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;

}
.pageList a{
    display: block;
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    cursor: pointer;
}
.pageActive{
    background-color: skyblue;
    color: #fff;
}
</style>
<script>
    const news = [
    {
        index:'1',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'1',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'1',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'1',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'2',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'2',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'2',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'2',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'3',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'3',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'3',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'3',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'4',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'4',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'4',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'4',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'5',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'5',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'5',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
    {
        index:'5',
        con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
        time:'2022-2-2'
    },
];

var newsList = document.querySelector(".newsList")// 获取内容部分
var pageList = document.querySelector(".pageList");// 获取分页器部分
var pageCount = Math.ceil(news.length / 4);// 计算有多少页
var newsArr = [];// 每一页所展示的数据
let onePage = 1;// 根据值显示每页数据

// 渲染新闻数据
let render = function () {
    newsList.innerHTML = '';
    newsArr = news.slice((onePage - 1) * 4, 4 * onePage)
    
    newsArr.forEach((item,index) => {
        newsList.innerHTML += 
        `
        <li>
            <span>${item.index}</span>
            <span>${item.time}</span>
            <p>${item.con}</p>
        </li>
        `
    })
}
// 初始化
render();


// 初始化分页器样式
for(let i = 1;i <= pageCount;i++){
    pageList.innerHTML += '<a>' +  i + '</a>'
}
let aList = pageList.querySelectorAll('a');
// 页面刚进来时第一页高亮
aList[onePage - 1].classList.add('pageActive')

// 点击分页器时高亮
aList.forEach((item,index) => {
    item.onclick = function(){
        for(let i = 0;i < aList.length;i++){
            aList[i].classList.remove('pageActive')
        }
        this.classList.add('pageActive')
        onePage = index + 1
        render();
    }
})
// 上一页和下一页
var next = document.getElementById("pageList_next");
var prev = document.getElementById("pageList_prev");

let changePages = function(){
    for(let i = 0;i < aList.length;i++){
        aList[i].classList.remove('pageActive')
    }
    aList[onePage - 1].classList.add('pageActive')
}
// 上一页
prev.onclick = function(){
    if(onePage <= 1){
        return
    }else{
        onePage = onePage - 1
        changePages()
        render()
    }
}
// 下一页
next.onclick = function(){
    if(onePage >= aList.length){
        return
    }
    onePage = onePage + 1
    changePages()
    render()
}
// 首页和尾页
var first = document.getElementById("first")
var last = document.getElementById("last")
// 首页
first.onclick = function(){
    if(onePage <= 1){
        return
    }
    onePage = 1
    changePages()
    render()
}
// 尾页
last.onclick = function(){
    if(onePage >= pageCount){
        return
    }
    onePage = pageCount
    changePages()
    render()
}
</script>
</html>
标签：绿绿,index,分页,JS,onePage,2022,time,con
来源： https://www.cnblogs.com/zgjg/p/15964927.html