<!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>
body {
font
-family: Arial, sans
-serif;
margin: 0;
padding: 0;
display: flex;
flex
-direction: column;
align
-items: center;
background
-color: #f9f9f9f9;
}
.book
-list {
display: flex;
flex
-wrap: wrap;
justify
-content: center;
gap: 20px;
margin: 20px;
}
.book
-item {
border: 1px solid #ddd;
border
-radius: 5px;
padding: 10px;
width: 200px;
text
-align: center;
cursor: pointer;
}
.book
-item img {
width: 100%;
height: auto;
border
-radius: 5px;
}
.book
-item h3 {
margin: 10px 0;
}
.book
-description {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border
-radius: 5px;
width: 80%;
background
-color: white;
}
.book
-description h2 {
margin
-top: 0;
}
.book
-description img {
width: 100px;
height: auto;
margin: 10px 0;
}
.enter
-borrowing {
margin
-top: 20px;
padding: 10px 20px;
background
-color: #ff6b6b;
color: white;
border: none;
border
-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>
书籍介绍</h1>
<div class="book
-list">
<div class="book
-item" onclick="showDescription('book1')">
<img src="O1CN01JXSrRS1CP1HcgQpqL
-101450072.avif" alt="
百年孤独">
<h3>
百年孤独</h3>
</div>
<div class="book
-item" onclick="showDescription('book2')">
<img src="OIP
-C.webp" alt="挪威的森林">
<h3>挪威的森林</h3>
</div>
<div class="book
-item" onclick="showDescription('book3')">
<img src="download.webp" alt="时间简史">
<h3>时间简史</h3>
</div>
<div class="book
-item" onclick="showDescription('book4')">
<img src="O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif" alt="浪潮之巅">
<h3>浪潮之巅</h3>
</div>
<div class="book
-item" onclick="showDescription('book5')">
<img src="12100263b
-0.jpg" alt="史记">
<h3>史记</h3>
</div>
<div class="book
-item" onclick="showDescription('book6')">
<img src="p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg" alt="世界历史">
<h3>世界历史</h3>
</div>
<div class="book
-item" onclick="showDescription('book7')">
<img src="OIP
-C.jpg" alt="艺术的故事">
<h3>艺术的故事</h3>
</div>
<div class="book
-item" onclick="showDescription('book8')">
<img src="v2
-07d883c65d1982f324a2f514cb04cd7e_r.jpg" alt="美的历程">
<h3>美的历程</h3>
</div>
</div>
<div class="book
-description" id="bookDescription">
<!
-- 书籍描述将在这里显示
-->
</div>
<button class="enter
-borrowing" onclick="goToBorrow()">进入借阅系统</button>
<script>
function showDescription(bookId) {
const bookDescription = document.getElementById('bookDescription');
const books = {
'book1': {
title: '
百年孤独',
author: '加西亚·马尔克斯',
description: '《
百年孤独》是哥伦比亚作家加西亚·马尔克斯的代表作，也是拉丁美洲魔幻现实主义文学的代表作之一，被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。',
image: 'O1CN01JXSrRS1CP1HcgQpqL
-101450072.avif'
},
'book2': {
title: '挪威的森林',
author: '村上春树',
description: '《挪威的森林》是日本作家村上春树于1987年所著的一部长篇爱情小说。',
image: 'OIP
-C.webp'
},
'book3': {
title: '时间简史',
author: '史蒂芬·霍金',
description: '《时间简史》是英国物理学家史蒂芬·霍金创作的科学著作。',
image: 'download.webp'
},
'book4': {
title: '浪潮之巅',
author: '吴军',
description: '《浪潮之巅》是吴军博士撰写的一本信息产业史。',
image: 'O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif'
},
'book5': {
title: '史记',
author: '司马迁',
description: '《史记》是西汉史学家司马迁撰写的纪传体史书，是中国历史上第一部纪传体通史。',
image: '12100263b
-0.jpg'
},
'book6': {
title: '世界历史',
author: 'H.G. 威尔斯',
description: '《世界历史》是英国著名作家H.G.威尔斯撰写的一本世界历史
书籍。',
image: 'p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg'
},
'book7': {
title: '艺术的故事',
author: 'E.H.贡布里希',
description: '《艺术的故事》是E.H.贡布里希撰写的一本艺术史
书籍。',
image: 'OIP
-C.jpg'
},
'book8': {
title: '美的历程',
author: '李泽厚',
description: '《美的历程》是李泽厚撰写的一本美学
书籍。',
image: 'v2
-07d883c65d1982f324a2f514cb04cd7e_r.jpg'
}
};
const book = books[bookId];
bookDescription.innerHTML = `
<h2>${book.title}</h2>
<img src="${book.image}" alt="${book.title}">
<p><strong>作者:</strong> ${book.author}</p>
<p>${book.description}</p>
`;
}
function goToBorrow() {
window.location.href = 'a2.html'; // 跳转到
书籍借阅系统页面
}
</script>
</body>
</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>
body {
font
-family: Arial, sans
-serif;
margin: 0;
padding: 0;
display: flex;
}
.sidebar {
width: 80%;
padding: 20px;
background
-color: #f9f9f9;
}
.content {
width: 20%;
padding: 20px;
}
.menu {
margin
-bottom: 20px;
}
.menu button {
margin
-right: 10px;
padding: 10px;
background
-color: #eee;
border: none;
cursor: pointer;
}
.menu button.active {
background
-color: #ff6b6b;
color: white;
}
.book
-item {
border: 1px solid #ddd;
border
-radius: 5px;
padding: 10px;
margin
-bottom: 10px;
display: flex;
align
-items: center;
}
.book
-item img {
width: 50px;
height: 50px;
margin
-right: 10px;
object
-fit: cover;
}
.book
-item div {
flex: 1;
}
.cart {
border: 1px solid #ddd;
border
-radius: 5px;
padding: 10px;
}
.cart h2 {
margin
-top: 0;
}
.cart ul {
list
-style: none;
padding: 0;
}
.cart li {
margin
-bottom: 5px;
display: flex;
justify
-content: space
-between;
}
.cart
-total {
font
-weight: bold;
margin
-top: 10px;
border
-top: 1px solid #ddd;
padding
-top: 10px;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>图书分类</h2>
<div class="menu">
<button class="active" onclick="filterBooks('all')">全部</button>
<button onclick="filterBooks('novel')">小说</button>
<button onclick="filterBooks('science')">科技</button>
<button onclick="filterBooks('history')">历史</button>
<button onclick="filterBooks('art')">艺术</button>
</div>
<div class="book
-list">
<div class="book
-item" data
-category="novel" data
-id="1">
<img src="O1CN01JXSrRS1CP1HcgQpqL
-101450072.avif" alt="
百年孤独">
<div>
<h3>
百年孤独</h3>
<p>加西亚·马尔克斯</p>
<button onclick="borrowBook(this, 1)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="novel" data
-id="2">
<img src="OIP
-C.webp" alt="挪威的森林">
<div>
<h3>挪威的森林</h3>
<p>村上春树</p>
<button onclick="borrowBook(this, 2)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="science" data
-id="3">
<img src="download.webp" alt="时间简史">
<div>
<h3>时间简史</h3>
<p>史蒂芬·霍金</p>
<button onclick="borrowBook(this, 3)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="science" data
-id="4">
<img src="O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif" alt="浪潮之巅">
<div>
<h3>浪潮之巅</h3>
<p>吴军</p>
<button onclick="borrowBook(this, 4)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="history" data
-id="5">
<img src="12100263b
-0.jpg" alt="史记">
<div>
<h3>史记</h3>
<p>司马迁</p>
<button onclick="borrowBook(this, 5)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="history" data
-id="6">
<img src="p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg" alt="世界历史">
<div>
<h3>世界历史</h3>
<p>H.G. 威尔斯</p>
<button onclick="borrowBook(this, 6)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="art" data
-id="7">
<img src="OIP
-C.jpg" alt="艺术的故事">
<div>
<h3>艺术的故事</h3>
<p>E.H.贡布里希</p>
<button onclick="borrowBook(this, 7)">借阅</button>
</div>
</div>
<div class="book
-item" data
-category="art" data
-id="8">
<img src="v2
-07d883c65d1982f324a2f514cb04cd7e_r.jpg" alt="美的历程">
<div>
<h3>美的历程</h3>
<p>李泽厚</p>
<button onclick="borrowBook(this, 8)">借阅</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="cart">
<h2>借阅清单</h2>
<ul id="cart
-list">
<!
-- 借阅
书籍将在这里显示
-->
</ul>
<div class="cart
-total">
共借阅: <span id="total
-count">0</span> 本
</div>
<button onclick="checkout()" style="width:100%;padding:10px;background:#ff6b6b;color:white;border:none;margin
-top:10px;">确认借阅</button>
</div>
</div>
<script>
let borrowedBooks = [];
function filterBooks(category) {
const books = document.querySelectorAll('.book
-item');
const buttons = document.querySelectorAll('.menu button');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category) ||
(category === 'all' && btn.textContent === '全部')) {
btn.classList.add('active');
}
});
books.forEach(book => {
if (category === 'all' || book.dataset.category === category) {
book.style.display = 'flex';
} else {
book.style.display = 'none';
}
});
}
function borrowBook(button, bookId) {
const bookItem = button.closest('.book
-item');
const title = bookItem.querySelector('h3').textContent;
const author = bookItem.querySelector('p').textContent;
if (borrowedBooks.some(book => book.title === title)) {
alert('这本书已经在您的借阅清单中!');
return;
}
borrowedBooks.push({
id: bookId,
title,
author
});
updateCart();
}
function updateCart() {
const cartList = document.getElementById('cart
-list');
const totalCount = document.getElementById('total
-count');
cartList.innerHTML = '';
borrowedBooks.forEach((book, index) => {
const li = document.createElement('li');
li.innerHTML = `
<span>${book.id}. ${book.title}</span>
<button onclick="removeBook(${index})" style="color:red;background:none;border:none;cursor:pointer;">×</button>
`;
cartList.appendChild(li);
});
totalCount.textContent = borrowedBooks.length;
}
function removeBook(index) {
borrowedBooks.splice(index, 1);
updateCart();
}
function checkout() {
if (borrowedBooks.length === 0) {
alert('请先选择要借阅的
书籍!');
return;
}
const bookTitles = borrowedBooks.map(book => `${book.id}. ${book.title}`).join('\n');
alert(`您已成功借阅以下
书籍:\n\n${bookTitles}\n\n共 ${borrowedBooks.length} 本`);
borrowedBooks = [];
updateCart();
}
</script>
</body>
</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>
body {
font
-family: Arial, sans
-serif;
margin: 0;
padding: 0;
display: flex;
justify
-content: center;
align
-items: center;
height: 100vh;
background
-color: #f9f9f9;
}
.login
-container {
background
-color: white;
padding: 20px;
border
-radius: 5px;
box
-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login
-container h2 {
text
-align: center;
margin
-bottom: 20px;
}
.login
-container label {
display: block;
margin
-bottom: 5px;
}
.login
-container input[type="text"],
.login
-container input[type="password"] {
width: 100%;
padding: 10px;
margin
-bottom: 20px;
border: 1px solid #ddd;
border
-radius: 5px;
}
.login
-container input[type="radio"] {
margin
-right: 5px;
}
.login
-container .role
-selection {
margin
-bottom: 20px;
}
.login
-container button {
width: 100%;
padding: 10px;
background
-color: #ff6b6b;
color: white;
border: none;
border
-radius: 5px;
cursor: pointer;
}
.login
-container button:hover {
background
-color: #ff4d4d;
}
</style>
</head>
<body>
<div class="login
-container">
<h2>登录图书管理系统</h2>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<div class="role
-selection">
<label>角色:</label>
<input type="radio" id="admin" name="role" value="admin">
<label for="admin">管理员</label>
<input type="radio" id="member" name="role" value="member">
<label for="member">会员</label>
</div>
<button type="submit">登录</button>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const role = document.querySelector('input[name="role"]:checked').value;
// 这里可以添加验证逻辑，例如发送到服务器验证
console.log('用户名:', username);
console.log('密码:', password);
console.log('角色:', role);
alert('登录成功！');
// 登录成功后跳转到相应的页面
window.location.href = 'a1.html'; // 假设登录成功后跳转到
书籍介绍页面
});
</script>
</body>
</html>将其改为动态网站
扫一扫
2124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
