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

代码语言：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_motorsports",
		"sports_rugby",
		"sports_soccer",
		"sports_tennis",
		"sports_volleyball",
		"pedal_bike",
		"moped",
		"two_wheeler",
		"directions_car",
		"local_taxi",
		"local_shipping",
		"directions_bus",
		"directions_transit",
		"subway",
		"flight",
		"mouse",
		"keyboard",
		"headset",
		"desktop_mac",
		"sim_card",
		"phone_android",
		"phone_iphone",
		"watch",
		"videogame_asset",
		"scanner",
		"attach_email",
		"attachment",
		"cloud_circle",
		"cloud_download",
		"cloud_upload",
		"text_snippet",
		"request_quote",
		"folder",
		"topic",
		"folder_shared",
		"4k",
		"fiber_new",
		"fiber_dvr",
		"explicit",
		"closed_caption",
		"hd",
		"high_quality",
		"closed_caption_disabled",
		"score",
		"picture_as_pdf",
		"filter_1",
		"filter_2",
		"filter_3",
		"filter_4",
		"filter_5",
		"filter_6",
		"filter_7",
		"filter_8",
		"filter_9",
		"filter_9_plus",
		"looks_one",
		"looks_two",
		"looks_3",
		"looks_4",
		"looks_5",
		"exposure_neg_1",
		"exposure_neg_2",
		"exposure_zero",
		"exposure_plus_1",
		"exposure_plus_2",
		"camera_alt",
		"center_focus_strong",
		"camera",
		"camera_roll",
		"photo",
		"movie_creation",
		"motion_photos_on",
		"motion_photos_pause.........完整代码请登录后点击上方下载按钮下载查看