前言
在某天，看到了广树大大的游戏游玩记录页面，感觉很酷啊，就想着自己也做一个，EMMM，用WordPress古腾堡编辑器估计难做，就算做出来也很麻烦，所以就使用了简洁易懂的HTML来做，现在感觉是做完了，发出来分享大家
效果
点击前往夏的游戏记录查看，这个代码可以自适应移动设备和PC，有两种专门的显示方式
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏记录页面</title>
<style>
.game-record {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.game-record img {
width: 100px;
height: 100px;
margin-right: 15px;
object-fit: cover;
border: 2px solid #364863;
}
.game-record div {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.game-record div span {
margin-bottom: 5px;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
.pagination button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border: 1px solid #ddd;
background-color: #f9f9f9;
font-size: 14px;
}
.pagination button.active {
background-color: #364863;
color: white;
}
.page-switcher, .comment-button {
display: none;
position: fixed;
bottom: 20px;
padding: 10px 20px;
background-color: #364863;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
z-index: 1000;
}
.page-switcher {
left: calc(50% - 110px);
}
.comment-button {
left: calc(50% + 10px);
}
.page-switcher.active, .comment-button.active {
display: block;
}
.page-popup {
display: none;
position: fixed;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
background-color: white;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.page-popup.active {
display: block;
}
.page-popup button {
display: block;
width: 100%;
margin: 5px 0;
padding: 5px 10px;
cursor: pointer;
border: 1px solid #ddd;
background-color: #f9f9f9;
font-size: 14px;
}
.page-popup button.active {
background-color: #364863;
color: white;
}
@media (max-width: 768px) {
.game-record {
flex-direction: column;
align-items: flex-start;
}
.game-record img {
width: 100%;
height: auto;
margin-right: 0;
margin-bottom: 15px;
}
.game-record div {
width: 100%;
}
.pagination button {
padding: 5px 8px;
font-size: 12px;
}
.page-switcher, .comment-button {
display: block;
}
.pagination {
display: none;
}
}
</style>
</head>
<body>
<div id="pagetop">
</div>
<div id="game-records">
</div>
<div class="pagination">
</div>
<button class="page-switcher">切换页面</button>
<button class="comment-button">评论区</button>
<div class="page-popup">
</div>
<div id="pagedown">
</div>
<script>
const gameRecords = [
{
img: "https://img.picui.cn/free/2025/01/29/67992316ab476.jpg",
name: "《GTA4》",
publisher: "Rockstar Games",
releaseDate: "2008年4月29日",
playTime: "在玩",
rating: "N/A",
comment: "N/A"
},
{
img: "https://img.picui.cn/free/2025/01/27/67977c972932f.jpg",
name: "《合金装备5幻痛》",
publisher: "Konami",
releaseDate: "2015年9月2日",
playTime: "在玩",
rating: "N/A",
comment: "N/A"
},
// 这里添加游戏记录
];
const recordsPerPage = 10; // 每页显示的游戏记录数量
let currentPage = 1;
function displayRecords(page) {
const startIndex = (page - 1) * recordsPerPage;
const endIndex = startIndex + recordsPerPage;
const recordsToShow = gameRecords.slice(startIndex, endIndex);
const recordsContainer = document.getElementById('game-records');
recordsContainer.innerHTML = '';
recordsToShow.forEach(record => {
const recordElement = document.createElement('div');
recordElement.className = 'game-record';
recordElement.innerHTML = `
<img src="${record.img}" alt="游戏图片">
<div>
<span>游戏名：${record.name}</span>
<span>发行商：${record.publisher}</span>
<span>发行日期：${record.releaseDate}</span>
<span>游玩时间：${record.playTime}</span>
<span>评分：${record.rating}</span>
<span>评语：${record.comment}</span>
</div>
`;
recordsContainer.appendChild(recordElement);
});
// 每次切换页面时自动滚动到 pagetop
document.getElementById('pagetop').scrollIntoView({ behavior: 'smooth' });
}
function setupPagination() {
const paginationContainer = document.querySelector('.pagination');
paginationContainer.innerHTML = '';
const totalPages = Math.ceil(gameRecords.length / recordsPerPage);
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.innerText = i;
button.addEventListener('click', () => {
currentPage = i;
displayRecords(currentPage);
updatePaginationButtons();
});
paginationContainer.appendChild(button);
}
updatePaginationButtons();
}
function updatePaginationButtons() {
const buttons = document.querySelectorAll('.pagination button, .page-popup button');
buttons.forEach((button, index) => {
if (index + 1 === currentPage) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
function setupPageSwitcher() {
const pageSwitcher = document.querySelector('.page-switcher');
const pagePopup = document.querySelector('.page-popup');
pageSwitcher.addEventListener('click', () => {
pagePopup.classList.toggle('active');
});
const totalPages = Math.ceil(gameRecords.length / recordsPerPage);
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.innerText = `第 ${i} 页`;
button.addEventListener('click', () => {
currentPage = i;
displayRecords(currentPage);
updatePaginationButtons();
pagePopup.classList.remove('active');
});
pagePopup.appendChild(button);
}
}
function setupCommentButton() {
const commentButton = document.querySelector('.comment-button');
commentButton.addEventListener('click', () => {
// 滚动到 pagedown
document.getElementById('pagedown').scrollIntoView({ behavior: 'smooth' });
});
}
displayRecords(currentPage);
setupPagination();
setupPageSwitcher();
setupCommentButton();
</script>
</body>
</html>如何添加游戏记录
{
img: "图片URL",
name: "这里填游戏名",
publisher: "这里填发行商",
releaseDate: "这里填发行日期",
playTime: "这里填游玩时间",
rating: "这里填评分",
comment: "这里填点评"
},按照这个格式填写到“//这里添加游戏”上面即可
如何使用？
只要你的CMS或者网站支持HTML应该都可以
这里我演示WordPress的使用方法
1.打开后台新建一个页面
2.放置一个“自定义HTML内容”组件
3.复制粘贴保存
然后就可以了
一些趣事
一开始是没有切换页面的按钮的，我本来想着做个缩放来适配移动端，结果不知道是WordPress的原因还是我的主题的原因，不管我把按钮缩放到多小，按钮就是会被挤到画面外面去，无奈只能做了个悬浮按钮来切换页面，效果意外的挺不错，顺便还做了个评论区按钮，我担心游戏太多，想评论的话要翻太久，我本来是写成直接滚动到页面底部，结果滚过头了，我就写了俩div标签定位，还挺好使的嘞
这个不好，应该创建个数据库，把游戏内容添加到数据库里，把这个功能做成插件
说的没错，我这玩意做的确实比较的，一言难尽……∠( ᐛ 」∠)＿
一开始也想过使用数据库什么的优化优化，但奈何我技术力低，也没多少时间，只能做成这样了(ฅ´ω`ฅ)
哈哈哈，大佬也开始记录游戏了呀！不过，游戏记录页面用的图床，好像我这里完全看不了。
阿哲，我换一个试试，可能他家封海外了，感谢广树大大提醒~
ヾ(≧∇≦*)ゝ