代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新起点图书中心</title>
<link rel="shortcut icon" href="./img/small-logo.png" type="image/x-icon">
<link rel="stylesheet" href="./css/bootstrap5.2.3.min.css">
<link rel="stylesheet" href="./css/book_user.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/search.css">
<link rel="stylesheet" href="./font/bootstrap-icons.css">
<!-- bootstrap 不依赖jquery -->
<script src="./js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light px-5 py-0 border-bottom border-2">
<div class="container-fluid mx-5" style="margin: 0 80px !important;">
<a class="navbar-brand py-0" href="./book_user.html">
<img src="./img/logo.png" width="200" height="80" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto ms-3 mb-2 mb-lg-0">
<!-- bootstrap5 控制左右边距的类是 ms me -->
<li class="nav-item mx-3">
<a class="nav-link" aria-current="page" href="./book_user.html">首页</a>
</li>
<li class="nav-item mx-3">
<!-- 以 / 开头，即再服务器根路径加载 -->
<a class="nav-link" href="./expe_book.html">求新书</a>
</li>
<li class="nav-item dropdown mx-3">
<a class="nav-link dropdown-toggle" href="javascript:;" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
关于
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:;">咨询</a></li>
<li><a class="dropdown-item" href="javascript:;">赞助</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:;">常见问题</a></li>
</ul>
</li>
</ul>
<form action="javascript:;" method="get" class="d-flex" role="search"
style="margin-right: 16px;">
<div class="ipt-group r-2 mb-3 mb-md-0">
<button type="button" class="origin-btn">
<span><i class="bi bi-search"></i></span>
</button>
<input type="search" id="origin-search" class="form-control" placeholder="请输入书名或者作者" readonly>
<span class="command">CTRL + K</span>
</div>
</form>
<a href="./login_register.html?login" id="is_login" class="btn my-2"><i class="bi bi-person"></i>登录</a>
<a href="./login_register.html?register" id="nav-register" class="btn mx-lg-2"><i
class="bi bi-person-add"></i>注册</a>
<div class="row ms-5 my-3 d-none" id="user-entry">
<div class="col-12">
<!-- 书写php根据登录判断是否是管理员 -->
<p class="mb-0" id="welcome">欢迎用户：<a href="./personal_center.html"
class="user-center fw-bolder text-decoration-none"></a> <a
href="./serve/logout_serve.php" id="logout" class="btn btn-danger ms-3 p-2 py-1">退出</a>
</p>
</div>
</div>
</div>
</div>
</nav>
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="search-header">
<form action="./page_book_intro.html" method="get" class="d-flex modal-search-form" role="search">
<label for="ipt" class="search-label" id="search-label">
<svg width="20" height="20" class="search-Icon" viewBox="0 0 20 20">
<path
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</label>
<!-- 没加name属性表单提交不加查询参数 -->
<input type="search" id="ipt" name="search" aria-autocomplete="both"
aria-labelledby="search-label" class="form-control ipt-search" autocomplete="off"
autocorrect="off" autocapitalize="off" enterkeyhint="search" spellcheck="false"
autofocus="true" maxlength="64" placeholder="请输入书名或者作者">
</form>
</div>
<div class="search-dropdown">
<div class="search-dropdown-container">
<section class="search-Hits" style="display: none;">
<div class="search-Hit-source">最近</div>
<ul role="listbox" aria-labelledby="search-label" id="search-list">
<li class="search-Hit" id="docsearch-item-0" role="option" aria-selected="true">
<a href="javascript:;">
<div class="search-Hit-Container">
<div class="search-Hit-icon">
<svg width="20" height="20" viewBox="0 0 20 20">
<g stroke="currentColor" fill="none" fill-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0">
</path>
<path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13">
</path>
</g>
</svg>
</div>
<div class="search-Hit-content-wrapper">
<span class="search-Hit-title">Composition API: setup() </span>
</div>
<div class="search-Hit-action">
<button class="search-Hit-action-button" id="save"
title="Save this search" type="submit">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z"
stroke="currentColor" data-num="0" fill="none"
fill-rule="evenodd" stroke-linejoin="round">
</path>
</svg>
</button>
</div>
<div class="search-Hit-action">
<button class="search-Hit-action-button" id="delete"
title="Remove this search from history" type="submit">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
stroke="currentColor" fill="none" fill-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round">
</path>
</svg>
</button>
</div>
</div>
</a>
</li>
</ul>
</section>
</div>
<div class="start-screen" style="display: block;">
<p class="search-none">最近暂无搜索</p>
</div>
</div>
<div class="search-footer">
<div class="search-logo">
<a href="./book_user.html">
<span class="footer-label">Search by</span>
<img src="./img/search-logo.png" class="logo-img" alt="">
</a>
</div>
<ul class="search-Commands">
<li><kbd class="search-Commands-Key"><svg width="15" height="15" aria-label="Enter key"
role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg></kbd><span class="footer-label">to select</span></li>
<li><kbd class="search-Commands-Key"><svg width="15" height="15" aria-label="Arrow down"
role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.2">
<path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path>
</g>
</svg></kbd><kbd class="search-Commands-Key"><svg width="15" height="15"
aria-label="Arrow up" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.2">
<path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path>
</g>
</svg></kbd><span class="footer-label">to navigate</span></li>
<li><kbd class="search-Commands-Key"><svg width="15" height="15" aria-label="Escape key"
role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.2">
<path
d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956">
</path>
</g>
</svg></kbd><span class="footer-label">to close</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container px-4 scroll" style="margin-top: 80px;">
<div class="row px-4 mx-auto" id="position-base">
<div class="col-9 book-main order-1 order-lg-0">
<div class="row mb-3 p-3">
<div class="col-5 me-auto mb-2 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?first_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?first_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
<div class="col-5 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?second_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?second_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
</div>
<div class="row mb-3 p-3">
<div class="col-5 me-auto mb-2 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?third_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?third_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
<div class="col-5 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?fourth_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?fourth_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
</div>
<div class="row mb-3 p-3">
<div class="col-5 me-auto mb-2 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?fifth_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?fifth_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
<div class="col-5 block-book">
<h5 class="book-type"><i class="bi bi-book"></i></h5>
<div class="button-group d-flex justify-content-around px-5" style="margin-bottom: 15px;">
<a href="?sixth_section_page=1" class="btn btn-outline-primary prev_page"
type="button">上一页</a>
<a href="?sixth_section_page=1" class="btn btn-outline-primary next_page"
type="button">下一页</a>
</div>
</div>
</div>
</div>
<div class="col-3 user order-0 mb-2 mb-lg-0 order-lg-1">
<div class="row">
<div class="col-12 user-row">
<div class="avatar-box my-3"><img class="avatar" src="./img/avatar.png" alt=""></div>
<div class="reader mb-3">
<h3>书友：<span class="reader-name">新起点</span></h3>
<p class="mb-1 user-time" id="pass-time">
<!-- 距离上次下线已过去：<span class="time"><i></i>天<i></i>时<i></i>分<i></i>秒</span> -->
距离上次下线已过去：<span class="time"></span>
</p>
<p class="mb-1 pb-2 user-time border-bottom" id="current-time">当前在线时长：<span
class="time"><i></i>天<i></i>时<i></i>分<i></i>秒</span></p>
<p class="mb-0 user-time">今天想看什么类型的书呢？</p>
</div>
<div class="jie-huan mb-3">
<p class="borrow" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="点击显示当前未还书籍" data-bs-custom-class="custom-tooltip">
<i class="bi bi-bookmark-fill me-1"></i>已借：<span>0</span>
</p>
<p class="return"><i class="bi bi-check2-circle me-1"></i>已归还：<span>0</span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ranking-row">
<h3 class="ranking-title"><a href="javascript:;">书籍借阅排行榜<i class="bi bi-chevron-right"></i></a>
</h3>
<ul class="ranking-list">
<li>
<div class="one-left">
<h3>NO.1</h3>
<a href="javascript:;" class="one-bookname">深入浅出 Vue.js</a>
<p class="one-left-text">本周借阅最多</p>
<p class="one-left-author">
<a href="javascript:;" class="one-type">计算机</a><i>·</i><a href="javascript:;"
class="one-write">刘博文</a>
</p>
</div>
<div class="one-right">
<a href="javascript:;">
<img src="./img/book-vue.jpg" alt="">
</a>
<span></span>
</div>
</li>
<li>
<div class="rank-num">
<span class="num rank-second">2</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">React 前端技术与工程实践</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num rank-third">3</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">你不知道的 JavaScript</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">4</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">影响力</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">5</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">营销笔记</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">6</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">半小时漫画世界史</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">7</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">明朝那些事儿</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">8</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">平凡的世界</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">9</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">浮躁</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
<li>
<div class="rank-num">
<span class="num">10</span>
</div>
<div class="name-box">
<a href="javascript:;" class="name">土里不土气：知识农夫的里山生活</a>
<i class="bi bi-dash float-end"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 使用bs5的offcanvas组件 -->
<div class="offcanvas offcanvas-end borrow-offcanvas" data-bs-scroll="true" tabindex="-1"
id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header book-title">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">您当前还有<span class="borrow-num text-primary">
<?=$borrow_book_num - $return_book_num?>
</span>本书未归还</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-group list-group-flush" id="borrow-list">
</ul>
<p class="nobook">当前暂无未归还书籍</p>
</div>
</div>
<!-- 配置toasts提示框 -->
<div class="toast my-toast fade" data-bs-delay="2000" style="z-index: 999;">
<div class="toast-body">
<div class="alert info-box" style="margin-bottom: 0;"></div>
</div>
</div>
<!-- 搜索历史记录收藏提示框 -->
<div class="toast fade" id="save-toast" data-bs-delay="2000" style="z-index: 9999;">
<div class="toast-body">
<div class="alert save-tip" style="margin-bottom: 0;"></div>
</div>
</div>
<div class="book-top" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="回到顶部"
data-bs-custom-class="custom-tooltip">
<i class="bi bi-caret-up-fill"></i>
</div>
<!-- 底部 -->
<footer>
<div class="container-fluid" style="background-color: rgb(236, 236, 238);">
<div class="container px-1" style="width: 1200px;">
<div class="row ps-5">
<div class="col-4" style="overflow: hidden; box-sizing: border-box;">
<p class="mb-0" style="margin-top: -15px; margin-left: -25px;"><img src="./img/xqd-logo.png"
alt="" width="200px" height="80px"></p>
<p class="mb-5">新起点图书中心，吃点丰富的“精神食粮”。<br> 新知识新起点，拓展视野，理解世界。</p>
</div>
<div class="col-8">
<div class="row">
<div class="col-4 ps-5">
<h5 class="pb-2">新起点图书中心</h5>
<ul class="list-unstyled">
<li><a href="javascript:;">书籍处理</a></li>
<li><a href="javascript:;">购买书籍</a></li>
<li><a href="javascript:;">联系我们</a></li>
</ul>
</div>
<div class="col-4 ps-5">
<h5 class="pb-2">新起点要事</h5>
<ul class="list-unstyled">
<li><a href="javascript:;">捐赠我们</a></li>
<li><a href="javascript:;">爱心传递</a></li>
<li><a href="javascript:;">书院合作</a></li>
</ul>
</div>
<div class="col-4 ps-5">
<h5 class="pb-2">新起点建站</h5>
<ul class="list-unstyled">
<li><a href="javascript:;">投递建议</a></li>
<li><a href="javascript:;">加入我们</a></li>
<li><a href="javascript:;">广告宣传</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" style="border: 1px solid #d7d8d9;"></div>
<div class="row">
<div class="col-12 my-3 text-center">
<p class="mb-0" style="color: rgb(102, 102, 102);">
<span style="font-size: 14px;">Copyright © 2023 新起点图书中心</span>
</p>
</div>
</div>
</div>
</div>
</footer>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/modal-open.js"></script>
<script src="./js/modal-search.js"></script>
<script>
// 使用提示框需出示提示框组件
$(function () {
$('[data-bs-toggle="tooltip"]').tooltip()
if ($(window).scrollTop() >= $('.scroll').offset().top) {
$('.book-top').show()
}
$('.book-main .row').animate({
opacity: 1
}, 400)
})
const toast = document.querySelector('.my-toast')
const switchToast = new bootstrap.Toast(toast)
// 提示框隐藏时，修改类名
toast.addEventListener('hidden.bs.toast', function () {
document.querySelector('.my-toast .info-box').className = 'alert info-box'
})
function getTime() {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
hour < 10 && (hour = '0' + hour)
minute < 10 && (minute = '0' + minute)
second < 10 && (second = '0' + second)
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
function timePassed(startDate) {
let now = new Date();
let start = new Date(startDate);
let timeDiff = now.getTime() - start.getTime()
if (timeDiff <= 0) {
return "时间错误"
}
let seconds = Math.floor(timeDiff / 1000)
let minutes = Math.floor(seconds / 60)
let hours = Math.floor(minutes / 60)
let days = Math.floor(hours / 24)
let months = Math.floor(days / 30)
let years = Math.floor(months / 12)
months = months % 12
days = days % 30
hours = hours % 24
minutes = minutes % 60
seconds = seconds % 60
// return years + "年 " + months + "月 " + days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒"
return [days, hours, minutes, seconds]
}
// 点击回到顶部按钮
let scrollFlag = false
$('.book-top').click(function () {
if (scrollFlag) return
scrollFlag = true
window.scrollTo({
top: 0,
behavior: 'smooth'
})
let timer = setInterval(() => {
if (window.scrollY === 0) {
scrollFlag = false
clearInterval(timer)
}
})
})
// console.log($('.scroll').offset().top);
$(window).scroll(function () {
if ($(this).scrollTop() >= $('.scroll').offset().top) {
$('.book-top').fadeIn(300)
} else {
$('.book-top').fadeOut(300)
}
})
const borrowOff = document.querySelector('.borrow-offcanvas')
const borrowOffcanvas = new bootstrap.Offcanvas(borrowOff)
$('.borrow').click(function () {
// 如果没选中任何一本书，offcanvas内容就是当前暂无未归还书籍
if (+$('.borrow span').text() - +$('.return span').text() == 0) {
$('.borrow-offcanvas .offcanvas-title').css('visibility', 'hidden')
$('.nobook').show()
} else {
$('.borrow-offcanvas .offcanvas-title').css('visibility', 'visible')
$('.nobook').hide()
}
borrowOffcanvas.show()
})
// id只能选一个，换成类名
$('.book-main .prev_page').click(function (e) {
e.preventDefault()
$.post('./serve/scroll_serve.php', { scroll: window.scrollY }, data => {
location.href = this.href
})
})
$('.book-main .next_page').click(function (e) {
e.preventDefault()
// console.log(this.href); // 这个是带服务器域名地址的
$.post('./serve/scroll_serve.php', { scroll: window.scrollY }, data => {
// console.log(data); // 后端不返回任何数据即是空值
location.href = this.href
})
})
</script>
<script>
window.onload = function () {
$.get('./serve/isLogin_serve.php', function (res) {
if (res.data.length !== 0) {
// console.log(res);
$('#is_login').hide()
$('#nav-register').hide()
$('#user-entry').removeClass('d-none').addClass('d-block')
const user_center_href = $('#welcome .user-center').attr('href')
$('#welcome .user-center').attr('href', user_center_href + `?id=${res.data.user_id}`)
// 本地储存用户id，个人中心页面需使用
localStorage.setItem('user_id', res.data.user_id)
// 显示用户名
$('#welcome .user-center').text(res.data.account)
$('.user .reader-name').text(res.data.account)
// 本地储存用户名（正常开发应该用的是后端生成的token）
localStorage.setItem('account', res.data.account)
// 计算时间段，欢迎用户
const date = new Date()
if(date.getHours() >= 6 && date.getHours() < 12) {
$('.info-box').text(`早上好！${res.data.account}`)
} else if(date.getHours() >= 12 && date.getHours() < 18) {
$('.info-box').text(`下午好！${res.data.account}`)
} else {
$('.info-box').text(`晚上好！${res.data.account}`)
}
if(!localStorage.getItem('entry_count')) {
localStorage.setItem('entry_count', 1)
} else if(localStorage.getItem('entry_count') == 1) return
// 控制提示语显示一次
$('.my-toast .info-box').addClass('alert-success')
switchToast.show()
}
})
}
document.addEventListener('DOMContentLoaded', function () {
// 获取书籍列表
$.get(`./serve/book_user_serve.php${location.search}`, function (res) {
// console.log(res);
let books = Object.values(res.books)
$('.book-main .row').each(function (i, ele) {
const double_books = books.slice(i * 2, i * 2 + 2)
// 开始渲染页面
$(ele).find('.book-type').eq(0).append(`类型：${double_books[0].type}`)
$(ele).find('.book-type').eq(1).append(`类型：${double_books[1].type}`)
$(ele).find('.prev_page').eq(0).attr('href', $(ele).find('.prev_page').eq(0).attr('href').split('=')[0] + '=' + (double_books[0].page - 1));
$(ele).find('.prev_page').eq(1).attr('href', $(ele).find('.prev_page').eq(1).attr('href').split('=')[0] + '=' + (double_books[1].page - 1));
$(ele).find('.next_page').eq(0).attr('href', $(ele).find('.next_page').eq(0).attr('href').split('=')[0] + '=' + (double_books[0].page + 1));
$(ele).find('.next_page').eq(1).attr('href', $(ele).find('.next_page').eq(1).attr('href').split('=')[0] + '=' + (double_books[1].page + 1));
double_books[0].page - 1 < 1 ? $(ele).find('.prev_page').eq(0).addClass('disabled') : ''
double_books[1].page - 1 < 1 ? $(ele).find('.prev_page').eq(1).addClass('disabled') : ''
double_books[0].page + 1 > double_books[0].total ? $(ele).find('.next_page').eq(0).addClass('disabled') : ''
double_books[1].page + 1 > double_books[1].total ? $(ele).find('.next_page').eq(1).addClass('disabled') : ''
// 第一页和最后一页按钮禁止点击
let template1 = ''
double_books[0].bookList.forEach(book => {
template1 += `
<div class="book-wrap">
<div class="book-content">
<p class="main-book-name mb-0">书名：<span>${book.bookname}</span></p>
<p class="main-book-author mb-0">作者：<span>${book.author}</span></p>
</div>
<!-- 隐藏div储存书籍id -->
<div class="borrow-book-id" style="display: none;">${book.book_id}</div>
<!-- 可以添加一个提示成功效果 -->
<div class="borrow-book"><span style="display: none;"><i class="bi bi-exclamation-circle"></i></span><span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="添加到已借书籍" data-bs-custom-class="br-book-tip"><i class="bi ${book.borrow_true ? 'bi-bookmark-check br-active' : 'bi-bookmark-plus'}"></i></span></div>
</div>`
})
let template2 = ''
double_books[1].bookList.forEach(book => {
template2 += `
<div class="book-wrap">
<div class="book-content">
<p class="main-book-name mb-0">书名：<span>${book.bookname}</span></p>
<p class="main-book-author mb-0">作者：<span>${book.author}</span></p>
</div>
<!-- 隐藏div储存书籍id -->
<div class="borrow-book-id" style="display: none;">${book.book_id}</div>
<!-- 可以添加一个提示成功效果 -->
<div class="borrow-book"><span style="display: none;"><i class="bi bi-exclamation-circle"></i></span><span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="添加到已借书籍" data-bs-custom-class="br-book-tip"><i class="bi ${book.borrow_true ? 'bi-bookmark-check br-active' : 'bi-bookmark-plus'}"></i></span></div>
</div>`
})
$(ele).find('.book-type').eq(0).after(template1)
$(ele).find('.book-type').eq(1).after(template2)
// tooltip初始化
$('[data-bs-toggle="tooltip"]').tooltip()
$('.borrow span').text(res.borrow_book_num)
$('.return span').text(res.return_book_num)
let template3 = ''
if (res.borrow_book.length > 0) {
res.borrow_book.forEach(book => {
template3 += `<li class="list-group-item"><span class="bookname">${book.bookname}</span> --- <span id="br-author">${book.author}</span></li>`
})
$('#borrow-list').html(template3)
// 显示未还书籍数量
$('.borrow-offcanvas .borrow-num').text(res.borrow_book_num - res.return_book_num)
$('.nobook').hide()
}
})
// 因为是动态渲染结构，页面有结构了再给图标添加事件 之前放在上面each循环里，造成多次事件绑定
// 有图标一来就被激活状态，这里就直接通过类名 bi 获取图标元素
$('.borrow-book span:nth-child(2) .bi').each((index, ele) => {
let click_num = 0 // 记录借书图标点击次数。在里面声明变量，每个标签独立使用，不影响其他标签。
ele.addEventListener('click', function () {
// 拦截未登录用户
if (!localStorage.getItem('account')) {
$('.my-toast .info-box').text('您还未登陆！请先去登陆再来借书吧！')
$('.my-toast .info-box').addClass('alert-primary')
switchToast.show()
return
}
click_num++
if (click_num == 3) {
$('.my-toast .info-box').text('请不要频繁点击！')
$('.my-toast .info-box').addClass('alert-danger')
switchToast.show()
$(this).parent().hide()
$(this).parent().siblings().fadeIn()
setTimeout(() => {
$(this).parent().siblings().hide()
$(this).parent().fadeIn()
}, 2500)
click_num = 0
return
}
const book_id = $(this).parents('.borrow-book').siblings('.borrow-book-id').text()
if (this.classList.contains('bi-bookmark-plus')) {
// const num = prompt(`请输入借书数量：\n如：借5本，则输入5。\n温馨提示：每一次借书最多只能借5本书，同一本书需归还后方可再借，不允许代借！\n还书方式：找到已借书籍，再次点击右侧图标即可。`)
// console.log(num); // 取消返回null
$.post('./serve/borrow_serve.php', { book_id, is_borrow: 1 }, (res) => {
if (res == '借书成功！') {
this.classList.remove('bi-bookmark-plus')
this.classList.add('bi-bookmark-check', 'br-active')
$('.borrow span').text(+$('.borrow span').text() + 1)
$('.borrow-offcanvas .borrow-num').text(+$('.borrow-offcanvas .borrow-num').text() + 1)
// 由于前面修改了图标是否是收藏，所以索引有问题
const template = `<li class="list-group-item"><span class="bookname">${$(this).parents('.borrow-book').siblings('.book-content').find('span').eq(0).text()}</span> --- <span id="br-author">${$(this).parents('.borrow-book').siblings('.book-content').find('span').eq(1).text()}</span></li>`
$('#borrow-list').append(template)
}
$('.my-toast .info-box').text(res)
$('.my-toast .info-box').addClass('alert-success')
switchToast.show()
})
} else {
// const num = prompt(`请输入归还数量：\n如：归还5本，则输入5。\n温馨提示：每一次归还最多只能归还5本书！不允许代还！`)
$.post('./serve/borrow_serve.php', { book_id, is_borrow: 0 }, (res) => {
if (res == '归还书籍成功！') {
this.classList.remove('bi-bookmark-check', 'br-active')
this.classList.add('bi-bookmark-plus')
// $('.borrow span').text(+$('.borrow span').text() - 1)
$('.return span').text(+$('.return span').text() + 1)
$('.borrow-offcanvas .borrow-num').text(+$('.borrow-offcanvas .borrow-num').text() - 1)
const bookname = $(this).parents('.borrow-book').siblings('.book-content').find('span').eq(0).text()
const author = $(this).parents('.borrow-book').siblings('.book-content').find('span').eq(1).text()
$('#borrow-list li').each((i, e) => {
if ($(e).find('.bookname').text() == bookname && $(e).find('#br-author').text() == author) {
$(e).remove()
}
})
}
$('.my-toast .info-box').text(res)
$('.my-toast .info-box').addClass('alert-success')
switchToast.show()
// location.href = location.href; // 自动刷新，重新渲染页面
})
}
})
})
$.get(`./serve/scroll_serve.php`, function (res) {
if (res !== '') {
window.scrollTo({
top: res,
behavior: 'instant' // 表示瞬间滚动
})
}
})
$.get('./serve/user_time_serve.php', function (res) {
// 用户时间显示
// console.log(res);
if(res.avatar_path) {
$('.avatar-box img').attr('src', res.avatar_path)
localStorage.setItem('avatar_path', res.avatar_path)
}
$('#pass-time span').html(res.interval)
const time = res.login_time
setInterval(() => {
const time_arr = timePassed(time)
$('#current-time .time i').each((i, ele) => $(ele).text(time_arr[i]))
}, 1000)
})
})
})
// 退出登录后清空搜索记录及账户
$('#logout').click(function(e) {
localStorage.removeItem('user_id')
localStorage.removeItem('account')
localStorage.removeItem('search')
localStorage.removeItem('entry_count')
localStorage.removeItem('avatar_path')
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手