原生js+css实现数据分页效果代码-html代码-BFW代码库

原生js+css实现数据分页效果代码

代码语言：html

所属分类：其他

代码描述：原生js+css实现数据分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
        <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" />

                <link
                        href="https://fonts.googleapis.com/icon?family=Material+Icons"
                        rel="stylesheet"
                />
                <style>
                    * {
    padding: 0;
    margin: 0;
    user-select: none
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f9ff
}

ul {
    list-style: none
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 600px
}

.container .content {
    display: flex;
    flex-wrap: wrap
}

.container .content li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    padding: 10px
}

.container .content li i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    font-size: 30px;
    color: #646b8a;
    background-color: #fff;
    cursor: pointer;
    transition: all .3s;
    box-shadow: 0 16px 32px rgba(90,100,130,0.1)
}

.container .content li i:hover {
    color: #6b5bfd;
    transform: scale(1.2)
}

.container .content li p {
    font-size: 13px;
    color: #cdd5f7
}

.container .pagination {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 30px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 16px 32px rgba(90,100,130,0.1)
}

.container .pagination li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin: 10px;
    font-size: 14px;
    border-radius: 5px;
    transition: all .3s
}

.container .pagination li.page-btn {
    color: #cdd5f7;
    font-size: 22px
}

.container .pagination li.page-btn.isClick {
    color: #646b8a;
    cursor: pointer
}

.container .pagination li.page-btn.isClick:hover {
    color: #fff;
    background-color: #6b5bfd
}

.container .pagination li.page-number {
    color: #646b8a;
    cursor: pointer
}

.container .pagination li.page-number:hover {
    color: #fff;
    font-weight: bold;
    background-color: #6b5bfd
}

.container .pagination li.page-number.active {
    color: #fff;
    font-weight: bold;
    background-color: #6b5bfd;
    cursor: default
}

.container .pagination li.page-dot {
    color: #cdd5f7;
    font-size: 18px;
    cursor: pointer
}

.container .pagination li.page-dot:hover {
    color: #6b5bfd
}

.container .pagination li.page-dot::after {
    content: "more_horiz"
}

.container .pagination li.page-dot.page-dot-prev:hover::after {
    content: "first_page"
}

.container .pagination li.page-dot.page-dot-next:hover::after {
    content: "last_page"
}

                </style>
        </head>
        <body>
                <div class="container">
                        <ul class="content"></ul>
                        <ul class="pagination"></ul>
                </div>
                <script >
                    /* icons为预先准备好的图标100个
 size为每页显示的个数
 page是显示的总页数 向上取整(一个也会占一页)
 pagerCount为要显示的数字按钮的个数 */
const icons = [
                "pregnant_woman",
                "accessibility",
                "accessibility_new",
                "emoji_people",
                "sports_kabaddi",
                "sports_handball",
                "elderly",
                "accessible",
                "accessible_forward",
                "hotel",
                "sports_baseball",
                "sports_basketball",
                "sports_football",
                "sports_golf",
                "sports_hockey",
                "sports_m.........完整代码请登录后点击上方下载按钮下载查看