本WIKI编辑权限开放，欢迎收藏起来防止迷路，也希望有爱的小伙伴和我们一起编辑哟~
有兴趣想参与WIKI建设的玩家可以加入交流群。赛尔计划WIKI交流群1：818743827
编辑帮助:目录 • BWIKI反馈留言板
本WIKI编辑权限开放，欢迎收藏起来防止迷路，也希望有爱的小伙伴和我们一起编辑哟~ 有兴趣想参与WIKI建设的玩家可以加入交流群。赛尔计划WIKI交流群1：818743827
全站通知：
Widget:沙盒237
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频管理后台</title>
<style>
body {
font-family: 'PingFang SC', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
}
.header {
background-color: #ffffff;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 18px;
color: #333;
margin: 0;
}
.header input {
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
}
.header button {
padding: 5px 10px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.content {
padding: 20px;
}
.video-list {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.video-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.video-item:last-child {
border-bottom: none;
}
.video-thumbnail {
width: 150px;
height: 84px;
margin-right: 20px;
border-radius: 4px;
}
.video-info {
flex: 1;
}
.video-info .title-container {
margin: 0 0 5px 0;
}
.video-info .title-container a {
font-size: 16px;
color: #333;
text-decoration: none;
color: #333;
white-space: normal; /* 确保标题换行显示 */
}
.video-info p {
font-size: 14px;
color: #666;
margin: 0 0 5px 0;
}
.video-stats {
display: flex;
gap: 15px;
margin-top: 10px;
}
.video-stats div {
display: flex;
align-items: center;
gap: 5px;
}
.video-stats img {
width: 16px;
height: 16px;
}
.video-actions {
margin-left: auto;
display: flex;
gap: 10px;
}
.video-actions button {
padding: 3px 10px;
background-color: #f5f7fa;
color: #333;
border: none;
border-radius: 4px;
cursor: pointer;
}
.video-actions button.delete {
background-color: #ff4d4f;
color: white;
}
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination button {
padding: 5px 10px;
background-color: #ffffff;
color: #333;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.pagination button.active {
background-color: #2ecc71;
color: white;
border: none;
}
.pagination input {
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 0 5px;
width: 50px;
}
#return-all {
display: none;
margin-top: 10px;
padding: 5px 10px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head> <body>
视频管理后台
<input type="text" id="search-input" placeholder="搜索视频">
<button id="search-button">搜索</button>
返回全部稿件
<button id="prevButton">上一页</button>
<button id="nextButton">下一页</button>
<input type="number" id="jump-page" placeholder="跳转至">
<button id="jump-button">跳转</button>
<script>
// 模拟从JSON文件加载数据
const originalVideos = {
"list": [
{
"vc": "SVC1HTHUF91T",
"title": "【短漫】Where is 约瑟？！",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "SVC1HTHUF91T",
"pic": ""
},
{
"vc": "SVC1HTVO7IVV",
"title": "【V3.0.3版本】活动内容总览",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "【V3.0.3版本】活动内容总览",
"pic": ""
},
{
"vc": "SVC1HUTEDE3T",
"title": "测试稿件",
"author": "1221",
"time": "2024-05-28",
"mode": "投稿模式",
"pagename": "测试稿件",
"pic": ""
},
{
"vc": "SVC1HUTIJUSH",
"title": "测试页面",
"author": "1232331",
"time": "2024-05-28",
"mode": "投稿模式",
"pagename": "SVC1HUTIJUSH",
"pic": ""
},
{
"vc": "SVC1HUTISN3Q",
"title": "测试页面",
"author": "1",
"time": "2024-05-28",
"mode": "投稿模式",
"pagename": "SVC1HUTISN3Q",
"pic": ""
},
{
"vc": "SVC1HVLTU903",
"title": "【V3.0.4版本】活动内容总览",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "【V3.0.4版本】活动内容总览",
"pic": ""
},
{
"vc": "SVC1I2FLPGBR",
"title": "【V3.0.5版本】活动内容总览",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "【V3.0.5版本】活动内容总览",
"pic": ""
},
{
"vc": "SVC1I46UD89T",
"title": "【V3.0.6版本】活动内容总览",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "【V3.0.6版本】活动内容总览",
"pic": ""
},
{
"vc": "SVC1I854U9O9",
"title": "《赛尔计划》V4.0.0版本内容一览",
"author": "",
"time": "",
"mode": "直发模式",
"pagename": "《赛尔计划》V4.0.0版本内容一览",
"pic": ""
},
{
"vc": "SVC1IMHB9GDA",
"title": "测试",
"author": "星空指引の方向",
"time": "",
"mode": "投稿模式",
"pagename": "SVC1IMHB9GDA",
"pic": ""
}
]
};
let videos = [...originalVideos.list];
let currentPage = 1;
const itemsPerPage = 10;
let isSearch = false;
// 渲染视频列表
function renderVideos() {
const videoList = document.getElementById('video-list');
videoList.innerHTML = ;
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedVideos = videos.slice(startIndex, endIndex);
paginatedVideos.forEach(video => {
const videoItem = document.createElement('div');
videoItem.className = 'video-item';
videoItem.innerHTML = `
<img src="https://via.placeholder.com/150x84" alt="视频缩略图" class="video-thumbnail">
${video.time}
${video.mode}（${video.vc}）
<img src="https://s1.hdslb.com/bfs/templar/york-static/qAnTDC0DSpuds9Rv.png" alt="阅读量"> 0
<img src="https://patchwiki.biligame.com/images/seerwar/0/0a/5x57hsi8avh4p0eh1vjzhogyifeevmc.png" alt="B站用户阅读量"> 0
<img src="https://s1.hdslb.com/bfs/templar/york-static/wOdLWtIVZ2XE9vNZ.png" alt="点赞"> 0
<img src="https://s1.hdslb.com/bfs/templar/york-static/IuXtxcG3v5O8to0K.png" alt="评论"> 0
<img src="https://s1.hdslb.com/bfs/templar/york-static/RPCS9YBWZUQgypok.png" alt="收藏"> 0
<img src="https://s1.hdslb.com/bfs/templar/york-static/QUYSPlIn2NJpI6TB.png" alt="投币"> 0
<img src="https://s1.hdslb.com/bfs/templar/york-static/929bYp7TSIAecSPG.png" alt="分享"> 0
<button>编辑</button>
<button>数据</button>
<button class="delete">删除</button>
`;
videoList.appendChild(videoItem);
});
// 更新分页信息
updatePagination();
}
// 更新分页按钮和信息
function updatePagination() {
const pagination = document.getElementById('pagination');
const totalPage = Math.ceil(videos.length / itemsPerPage);
// 更新分页信息
const pageInfo = document.getElementById('page-info');
pageInfo.textContent = `共 ${totalPage} 页 / ${videos.length} 个`;
// 更新分页按钮状态
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
prevButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === totalPage;
// 渲染页码按钮
pagination.innerHTML = `
<button id="prevButton">上一页</button>
<button id="nextButton">下一页</button>
<input type="number" id="jump-page" placeholder="跳转至">
<button id="jump-button">跳转</button>
`;
}
// 搜索功能
document.getElementById('search-button').addEventListener('click', () => {
const searchInput = document.getElementById('search-input').value.trim();
if (searchInput) {
// 过滤视频列表
const filteredVideos = originalVideos.list.filter(video => video.title.includes(searchInput));
if (filteredVideos.length === 0) {
alert('未找到相关稿件');
} else {
currentPage = 1;
videos = filteredVideos;
isSearch = true;
renderVideos();
document.getElementById('return-all').style.display = 'block';
}
} else {
// 显示全部视频
currentPage = 1;
isSearch = false;
videos = [...originalVideos.list];
renderVideos();
document.getElementById('return-all').style.display = 'none';
}
});
// 返回全部稿件
document.getElementById('return-all').addEventListener('click', () => {
currentPage = 1;
isSearch = false;
videos = [...originalVideos.list];
renderVideos();
document.getElementById('return-all').style.display = 'none';
document.querySelector(`input#search-input`).value=``
});
// 上一页按钮
document.getElementById('prevButton').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderVideos();
}
});
// 下一页按钮
document.getElementById('nextButton').addEventListener('click', () => {
const totalPage = Math.ceil(videos.length / itemsPerPage);
if (currentPage < totalPage) {
currentPage++;
renderVideos();
}
});
// 跳转按钮
document.getElementById('jump-button').addEventListener('click', () => {
const jumpPage = document.getElementById('jump-page').value.trim();
if (jumpPage && !isNaN(jumpPage) && jumpPage > 0 && jumpPage <= Math.ceil(videos.length / itemsPerPage)) {
currentPage = parseInt(jumpPage);
renderVideos();
} else {
alert('请输入有效的页码');
}
});
// 初始化
renderVideos();
</script>
</body> </html>
沪公网安备 31011002002714 号