zq
4 months ago
13 changed files with 925 additions and 189 deletions
@ -0,0 +1,422 @@ |
|||||
|
.flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
#page-numbers { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
list-style: none; |
||||
|
color: #8a8a8a; |
||||
|
padding: 0; |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
#page-numbers span { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
#page-numbers span { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
#page-numbers span:hover { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
#page-numbers .pagActive:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
#next-page{ |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
.input-page span{ |
||||
|
display: inline-block; |
||||
|
} |
||||
|
/* 分页容器样式 */ |
||||
|
.pagination { |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.pagination input { |
||||
|
width: 50px; |
||||
|
padding: 5px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.pagActive { |
||||
|
background: #006AFF; |
||||
|
color: #fff; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.home-page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.header-wrap { |
||||
|
/* position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; */ |
||||
|
width: calc(100% - 64px); |
||||
|
height: 46px; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 32px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
background: linear-gradient(270deg, #4EA4F3 0%, #3D85EA 100%); |
||||
|
} |
||||
|
|
||||
|
.home-logo { |
||||
|
width: 168px; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown 容器 */ |
||||
|
.dropdown { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown 按钮 */ |
||||
|
.dropdown-toggle { |
||||
|
background-color: transparent; |
||||
|
padding: 10px 20px; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown 面板 */ |
||||
|
.dropdown-panel { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
background-color: #f9f9f9; |
||||
|
min-width: 160px; |
||||
|
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown 面板中的链接 */ |
||||
|
.dropdown-panel a { |
||||
|
color: black; |
||||
|
padding: 12px 16px; |
||||
|
text-decoration: none; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown 面板中的链接悬停效果 */ |
||||
|
.dropdown-panel a:hover { |
||||
|
background-color: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
/* 图标旋转效果 */ |
||||
|
.icon { |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
/* 面板展开时图标的旋转 */ |
||||
|
.icon.rotate { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.header-right { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.home-main { |
||||
|
margin: 20px; |
||||
|
background: #fff; |
||||
|
padding: 0 14px; |
||||
|
} |
||||
|
|
||||
|
.tab-list { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul { |
||||
|
width: 346px; |
||||
|
height: 20px; |
||||
|
display: flex; |
||||
|
text-align: center; |
||||
|
justify-content: space-between; |
||||
|
letter-spacing: 1px; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul::after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
width: 500px; |
||||
|
height: 1px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
bottom: -8px; |
||||
|
background: linear-gradient(270deg, rgba(140, 145, 157, 0.1) 0%, rgba(140, 145, 157, 0.2) 50%, rgba(140, 145, 157, 0.1) 100%); |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul li { |
||||
|
color: #3D4B54; |
||||
|
|
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul li span { |
||||
|
position: relative; |
||||
|
color: #3D4B54; |
||||
|
|
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul li span.active { |
||||
|
color: #1675FF !important; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.index-nav-wrap ul li span.active::after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
background: #1675FF; |
||||
|
border-radius: 2px; |
||||
|
left: 50%; |
||||
|
margin-left: -50%; |
||||
|
bottom: -11px; |
||||
|
} |
||||
|
|
||||
|
/* 小版视频容器 */ |
||||
|
#small-video-container { |
||||
|
width: 200px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* 小版视频封面图 */ |
||||
|
#small-video-cover { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
border: 2px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
/* vedio */ |
||||
|
/* 初始小版视频样式 */ |
||||
|
/* 放大后的视频容器 */ |
||||
|
#large-video-container { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 800px; |
||||
|
max-width: 800px; |
||||
|
z-index: 1000; |
||||
|
background: black; |
||||
|
padding: 50px; |
||||
|
border-radius: 16px; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
/* 放大后的视频 */ |
||||
|
#large-video { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* 关闭按钮 */ |
||||
|
#close-btn ,#close-btn1{ |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
background: red; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
height: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
/* padding: 10px; */ |
||||
|
width: 30px; |
||||
|
border-radius: 50%; |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
/* 小版图片容器 */ |
||||
|
#small-image-container { |
||||
|
width: 170px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* 小版图片 */ |
||||
|
.small-image { |
||||
|
/* width: 100%; */ |
||||
|
/* height: 100%; */ |
||||
|
border-radius: 5px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.small-image-desc{ |
||||
|
position: absolute; |
||||
|
left: 6px; |
||||
|
bottom: 8px; |
||||
|
border-radius: 2px; |
||||
|
background: rgba(0, 0, 0, 0.4); |
||||
|
padding: 4px 10px 5px 10px; |
||||
|
font-size: 12px; |
||||
|
z-index: 1; |
||||
|
line-height: 13px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.play-video{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%;transform: translate(-50%,-50%); |
||||
|
} |
||||
|
/* 放大后的图片容器 */ |
||||
|
#large-image-container { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
/* width: 800px; */ |
||||
|
/* height: 100%; */ |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
z-index: 1000; |
||||
|
text-align: center; |
||||
|
border-radius: 16px; |
||||
|
} |
||||
|
#large-image-container h2{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 放大后的图片 */ |
||||
|
#large-image { |
||||
|
margin: 20px 50px 50px; |
||||
|
width: 800px; |
||||
|
border: 5px solid white; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
/* 关闭按钮 */ |
||||
|
#close-btn2 { |
||||
|
position: absolute; |
||||
|
top: 20px; |
||||
|
right: 20px; |
||||
|
background: #fff; |
||||
|
color: #000; |
||||
|
border: none; |
||||
|
padding: 10px 15px; |
||||
|
border-radius: 50%; |
||||
|
cursor: pointer; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.button { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 7px 22px; |
||||
|
border-radius: 3px; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
letter-spacing: 0.08em; |
||||
|
border: 1px solid #DFE2E6; |
||||
|
margin-left: 20px; |
||||
|
color: #23242B; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
button:hover{ |
||||
|
opacity: .8; |
||||
|
} |
||||
|
.button-primary { |
||||
|
background: #006AFF; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.button-normal {} |
||||
|
|
||||
|
.btngroups { |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 数据列表样式 */ |
||||
|
#data-list { |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
#data-list li { |
||||
|
padding: 10px; |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.list_all{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.list_item{ |
||||
|
margin: 18px 12px; |
||||
|
padding-bottom: 18px; |
||||
|
width: 100%; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
.list_item_top{ |
||||
|
color: #8A9099; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.list_item_top b{ |
||||
|
color: #1E2226; |
||||
|
} |
||||
|
.desc_text{ |
||||
|
line-height: 18px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1E2226; |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.img_list{ |
||||
|
margin: 8px 0; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.img_list img{ |
||||
|
width: 170px; |
||||
|
margin-right: 8px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.green,.blue{ |
||||
|
padding: 2px 10px; |
||||
|
border-radius: 4px; |
||||
|
opacity: 1; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #0DAF49; |
||||
|
background: rgba(239, 255, 224, 0.5); |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid rgba(0, 194, 97, 0.6); |
||||
|
} |
||||
|
.blue{ |
||||
|
color: #006AFF; |
||||
|
background: #F2F7FF; |
||||
|
border: 1px solid #BFDAFF; |
||||
|
} |
||||
|
After Width: | Height: | Size: 280 KiB |
|
After Width: | Height: | Size: 309 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 64 KiB |
@ -0,0 +1,347 @@ |
|||||
|
$(document).ready(function () { |
||||
|
var imgurl='' |
||||
|
var vediourl='' |
||||
|
var list = [ |
||||
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
||||
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
||||
|
'' |
||||
|
] |
||||
|
// viedo
|
||||
|
// 点击小版视频封面图时放大
|
||||
|
$('.small-video-cover').click(function () { |
||||
|
vediourl = $(this).attr('href') |
||||
|
imgurl = $(this).attr('src') |
||||
|
$('#large-viedo-url').attr('src',imgurl) |
||||
|
$('#large-video-container').fadeIn(); // 显示放大后的视频容器
|
||||
|
$('#large-video').get(0).play(); // 播放视频
|
||||
|
}); |
||||
|
|
||||
|
// 点击关闭按钮时关闭放大视频
|
||||
|
$('#close-btn').click(function () { |
||||
|
$('#large-video').get(0).pause(); // 暂停视频
|
||||
|
$('#large-video-container').fadeOut(); // 隐藏放大后的视频容器
|
||||
|
}); |
||||
|
|
||||
|
// 图片
|
||||
|
$('.small-image').click(function () { |
||||
|
imgurl = $(this).attr('src') |
||||
|
$('#large-image').attr('src',imgurl) |
||||
|
$('#large-image-container').fadeIn(); // 显示放大后的图片容器
|
||||
|
}); |
||||
|
|
||||
|
// 点击关闭按钮时关闭放大图片
|
||||
|
$('#close-btn2').click(function () { |
||||
|
$('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
|
||||
|
}); |
||||
|
|
||||
|
// 点击背景区域时关闭放大图片
|
||||
|
$('#large-image-container').click(function (e) { |
||||
|
if (e.target === this) { |
||||
|
$('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
|
||||
|
} |
||||
|
}); |
||||
|
// 假数据假数据-----
|
||||
|
var waitCheck = [ |
||||
|
{ |
||||
|
source: '0', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
vedios: [ |
||||
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
||||
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
||||
|
'' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
imgs: [ |
||||
|
'viewimg1.png', |
||||
|
'viewimg2.png', |
||||
|
'viewimg3.png', |
||||
|
], |
||||
|
source: '1', |
||||
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
source: '0', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
vedios: [ |
||||
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
||||
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
||||
|
'' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
imgs: [ |
||||
|
'viewimg1.png', |
||||
|
'viewimg2.png', |
||||
|
'viewimg3.png', |
||||
|
], |
||||
|
source: '1', |
||||
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
source: '0', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
vedios: [ |
||||
|
'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
||||
|
'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
||||
|
'' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
imgs: [ |
||||
|
'viewimg1.png', |
||||
|
'viewimg2.png', |
||||
|
'viewimg3.png', |
||||
|
], |
||||
|
source: '1', |
||||
|
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
||||
|
name: '麻辣烫---', |
||||
|
lurutime: '2025.01.13 23:00', |
||||
|
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' |
||||
|
|
||||
|
}, |
||||
|
]; //待审批
|
||||
|
var checkList = []; //已审批
|
||||
|
var deletedList = []; //已删除
|
||||
|
function toggleDropdown() { |
||||
|
const dropdownPanel = document.querySelector('.dropdown-panel'); |
||||
|
const icon = document.querySelector('.icon'); |
||||
|
|
||||
|
// 切换面板的显示/隐藏
|
||||
|
if (dropdownPanel.style.display === 'block') { |
||||
|
dropdownPanel.style.display = 'none'; |
||||
|
icon.classList.remove('rotate'); // 移除旋转效果
|
||||
|
} else { |
||||
|
dropdownPanel.style.display = 'block'; |
||||
|
icon.classList.add('rotate'); // 添加旋转效果
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 点击页面其他区域关闭面板
|
||||
|
document.addEventListener('click', (event) => { |
||||
|
const dropdown = document.querySelector('.dropdown'); |
||||
|
const dropdownPanel = document.querySelector('.dropdown-panel'); |
||||
|
const icon = document.querySelector('.icon'); |
||||
|
|
||||
|
// 如果点击的区域不在 Dropdown 内，则关闭面板
|
||||
|
if (!dropdown.contains(event.target)) { |
||||
|
dropdownPanel.style.display = 'none'; |
||||
|
icon.classList.remove('rotate'); |
||||
|
} |
||||
|
}); |
||||
|
var list = waitCheck |
||||
|
var currentPage = 1; // 定义变量，用于存储当前的页码
|
||||
|
var pageSize = 2;// 定义变量，用于存储当前页条数
|
||||
|
renderList(list) |
||||
|
// 当文档加载完成后执行以下函数
|
||||
|
function renderList (list) { |
||||
|
function createPagination(currentPage, totalPages) { |
||||
|
var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码
|
||||
|
|
||||
|
// 如果当前页不是第一页，则生成一个“上一页”按钮
|
||||
|
// if (currentPage > 1) {
|
||||
|
paginationHtml += "<li><</li>"; |
||||
|
// }
|
||||
|
|
||||
|
// 始终显示第一页的页码
|
||||
|
paginationHtml += generatePageNumberHtml(1, currentPage); |
||||
|
|
||||
|
// 如果总页数大于1页，则继续生成分页条的其余部分
|
||||
|
if (totalPages > 1) { |
||||
|
// 如果当前页码大于3，则在第一页和当前页之间添加省略号
|
||||
|
if (currentPage > 3) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
// 遍历当前页附近的页码，并生成对应的分页按钮
|
||||
|
for ( |
||||
|
let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++ |
||||
|
) { |
||||
|
paginationHtml += generatePageNumberHtml(i, currentPage); |
||||
|
} |
||||
|
// 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
|
||||
|
if (currentPage < totalPages - 2) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 始终显示最后一页的页码
|
||||
|
paginationHtml += generatePageNumberHtml(totalPages, currentPage); |
||||
|
|
||||
|
// 如果当前页不是最后一页，则生成一个“下一页”按钮
|
||||
|
if (currentPage < totalPages) { |
||||
|
paginationHtml += "<li>></li>"; |
||||
|
} |
||||
|
|
||||
|
// 返回生成的分页条HTML字符串
|
||||
|
return paginationHtml; |
||||
|
} |
||||
|
// 创建分页条的函数
|
||||
|
|
||||
|
// 生成单个页码按钮的HTML的函数
|
||||
|
function generatePageNumberHtml(pageNumber, currentPage) { |
||||
|
// 返回一个格式化后的HTML字符串，包含激活状态的判断
|
||||
|
return ( |
||||
|
'<li class="' + |
||||
|
(pageNumber === currentPage ? "pagActive" : "") + |
||||
|
'">' + |
||||
|
pageNumber + |
||||
|
"</li>" |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 选择页码的函数
|
||||
|
function selectPage(pageNumber) { |
||||
|
// 更新当前页码的变量，并重新生成分页条
|
||||
|
currentPage = pageNumber; |
||||
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); |
||||
|
} |
||||
|
|
||||
|
// 为分页条上的每个按钮绑定点击事件
|
||||
|
$("#pagination").on("click", "li", function (event) { |
||||
|
let pageNumber = $(this).text(); // 获取点击的页码或按钮文本
|
||||
|
|
||||
|
// 如果点击的是省略号，则不执行任何操作
|
||||
|
if (pageNumber === "...") { |
||||
|
event.preventDefault(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 根据点击的按钮，调用selectPage函数更新当前页码
|
||||
|
if (pageNumber === "<" ) { |
||||
|
if(currentPage <2){ |
||||
|
return |
||||
|
} |
||||
|
selectPage(currentPage - 1); |
||||
|
} else if (pageNumber === ">") { |
||||
|
// if(currentPage <2){
|
||||
|
// return
|
||||
|
// }
|
||||
|
selectPage(currentPage + 1); |
||||
|
} else { |
||||
|
selectPage(parseInt(pageNumber)); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化分页条，总页数为20，默认显示第一页
|
||||
|
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); |
||||
|
} |
||||
|
|
||||
|
// 模拟数据
|
||||
|
const allData = [ |
||||
|
"数据 1", "数据 2", "数据 3", "数据 4", "数据 5", |
||||
|
"数据 6", "数据 7", "数据 8", "数据 9", "数据 10", |
||||
|
"数据 11", "数据 12", "数据 13", "数据 14", "数据 15", |
||||
|
"数据 16", "数据 17", "数据 18", "数据 19", "数据 20", |
||||
|
"数据 21", "数据 22", "数据 23", "数据 24", "数据 25", |
||||
|
"数据 26", "数据 27", "数据 28", "数据 29", "数据 30" |
||||
|
]; |
||||
|
// 总页数
|
||||
|
const totalPages = Math.ceil(allData.length / pageSize); |
||||
|
|
||||
|
// 渲染数据
|
||||
|
function renderData() { |
||||
|
const start = (currentPage - 1) * pageSize; |
||||
|
const end = start + pageSize; |
||||
|
const pageData = allData.slice(start, end); |
||||
|
|
||||
|
// 清空列表
|
||||
|
$('#data-list').empty(); |
||||
|
|
||||
|
// 渲染当前页数据
|
||||
|
pageData.forEach(item => { |
||||
|
$('#data-list').append(`<li>${item}</li>`); |
||||
|
}); |
||||
|
|
||||
|
// 渲染分页按钮
|
||||
|
renderPagination(); |
||||
|
} |
||||
|
|
||||
|
// 渲染分页按钮
|
||||
|
function renderPagination() { |
||||
|
const pageNumbers = $('#page-numbers'); |
||||
|
pageNumbers.empty(); |
||||
|
|
||||
|
// 总页数小于等于 7 时，显示所有页码
|
||||
|
if (totalPages <= 7) { |
||||
|
for (let i = 1; i <= totalPages; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
} else { |
||||
|
// 总页数大于 7 时，显示部分页码并用省略号代替
|
||||
|
if (currentPage <= 4) { |
||||
|
// 前 5 页 + 省略号 + 最后一页
|
||||
|
for (let i = 1; i <= 5; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
pageNumbers.append(`<span>${totalPages}</span>`); |
||||
|
} else if (currentPage >= totalPages - 3) { |
||||
|
// 第一页 + 省略号 + 最后 5 页
|
||||
|
pageNumbers.append('<span>1</span>'); |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
for (let i = totalPages - 4; i <= totalPages; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
} else { |
||||
|
// 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
|
||||
|
pageNumbers.append('<span>1</span>'); |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
for (let i = currentPage - 2; i <= currentPage + 2; i++) { |
||||
|
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
||||
|
} |
||||
|
pageNumbers.append('<span>...</span>'); |
||||
|
pageNumbers.append(`<span>${totalPages}</span>`); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 绑定页码点击事件
|
||||
|
pageNumbers.find('span').click(function () { |
||||
|
const page = parseInt($(this).text()); |
||||
|
if (!isNaN(page)) { |
||||
|
currentPage = page; |
||||
|
renderData(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 初始化渲染
|
||||
|
renderData(); |
||||
|
|
||||
|
// 上一页
|
||||
|
$('#prev-page').click(function () { |
||||
|
if (currentPage > 1) { |
||||
|
currentPage--; |
||||
|
renderData(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 下一页
|
||||
|
$('#next-page').click(function () { |
||||
|
if (currentPage < totalPages) { |
||||
|
currentPage++; |
||||
|
renderData(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 跳转到指定页
|
||||
|
$('#go-to-page').click(function () { |
||||
|
const page = parseInt($('#jump-to-page').val()); |
||||
|
if (page >= 1 && page <= totalPages) { |
||||
|
currentPage = page; |
||||
|
renderData(); |
||||
|
} else { |
||||
|
alert(`请输入有效的页码（1-${totalPages}）`); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
Loading…
Reference in new issue