问：新增book.html,页面功能是写书和读书。数据信息存储在本地。 写书功能包含书名，目录，内容；写书可以选取历史或新增，如果是选取历史书籍，那么需要填充目录，选择目录后显示内容，内容能够按每100行分一页最好。 读书功能包含书名，目录，内容；选取历史书籍后填充目录，选择目录后显示内容，内容按每100行分一页，内容支持翻页
gpt:
为了实现具有写书和读书功能的 `book.html` 页面，以及在本地存储书籍信息，包括书名、目录和内容，你可以按照以下步骤操作。
首先，创建一个 `book.html` 文件，其中包含了必要的 HTML 结构和表单元素，以支持写书和读书功能：
```html
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<style>
/* 添加一些基本的样式以改善页面外观 */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
}
.pagination {
text-align: center;
}
</style>
</head>
<body>
<h1>My Book</h1>
<!-- 写书表单 -->
<h2>Write a Book</h2>
<form id="writeBookForm">
<label for="bookTitle">Title:</label>
<input type="text" id="bookTitle" required>
<label for="bookTableOfContents">Table of Contents:</label>
<textarea id="bookTableOfContents" rows="4" required></textarea>
<label for="bookContent">Content:</label>
<textarea id="bookContent" rows="10" required></textarea>
<label for="bookType">Choose:</label>
<select id="bookType" οnchange="showBook(this.value)">
<option value="new">New Book</option>
<option value="history">History Book</option>
</select>
<!-- 如果选择历史书籍，则显示历史书籍列表 -->
<div id="historyBooks" style="display: none;">
<label for="historyBook">Select a History Book:</label>
<select id="historyBook" οnchange="loadHistoryBook(this.value)">
<!-- 在此处显示已保存的历史书籍 -->
</select>
</div>
<button type="submit">Save Book</button>
</form>
<!-- 读书功能 -->
<h2>Read a Book</h2>
<label for="readBookTitle">Select a Book Title:</label>
<select id="readBookTitle" οnchange="loadTableOfContents(this.value)">
<!-- 在此处显示已保存的书籍标题 -->
</select>
<label for="readTableOfContents">Table of Contents:</label>
<textarea id="readTableOfContents" rows="4" readonly></textarea>
<label for="readContent">Content:</label>
<textarea id="readContent" rows="10" readonly></textarea>
<!-- 分页功能 -->
<div class="pagination">
<button id="prevPage" οnclick="changePage(-1)" disabled>Previous Page</button>
<span id="pageInfo">Page 1</span>
<button id="nextPage" οnclick="changePage(1)" disabled>Next Page</button>
</div>
<script src="book.js"></script>
</body>
</html>
```
在上述 HTML 中，我们创建了一个表单来支持写书功能，包括书名、目录和内容。在写书时，你可以选择是创建新书还是选择历史书籍并填充目录。在读书功能部分，你可以选择要读的书籍，并查看书籍的目录和内容。
接下来，创建一个名为 `book.js` 的 JavaScript 文件来处理写书和读书的逻辑，以及分页功能：
```javascript
// book.js
document.addEventListener("DOMContentLoaded", function () {
const writeBookForm = document.getElementById("writeBookForm");
const bookTitleInput = document.getElementById("bookTitle");
const bookTableOfContentsTextarea = document.getElementById("bookTableOfContents");
const bookContentTextarea = document.getElementById("bookContent");
const bookTypeSelect = document.getElementById("bookType");
const historyBooksDiv = document.getElementById("historyBooks");
const historyBookSelect = document.getElementById("historyBook");
const readBookTitleSelect = document.getElementById("readBookTitle");
const readTableOfContentsTextarea = document.getElementById("readTableOfContents");
const readContentTextarea = document.getElementById("readContent");
const pageInfoSpan = document.getElementById("pageInfo");
const prevPageButton = document.getElementById("prevPage");
const nextPageButton = document.getElementById("nextPage");
let currentBook = null; // 保存当前正在编辑的书籍信息
let currentPage = 1; // 当前页数
const linesPerPage = 100; // 每页行
问：继续补充剩下内容
gpt:
很抱歉，由于文本限制，无法一次性提供完整的代码。以下是继续完成 `book.js` 文件的代码，包括写书和读书的逻辑，以及分页功能：
```javascript
// 写书功能
writeBookForm.addEventListener("submit", function (event) {
event.preventDefault();
const bookTitle = bookTitleInput.value;
const bookTableOfContents = bookTableOfContentsTextarea.value;
const bookContent = bookContentTextarea.value;
if (bookTypeSelect.value === "history") {
// 如果选择历史书籍，则根据选择的历史书籍保存书籍信息
localStorage.setItem(historyBookSelect.value, JSON.stringify({ tableOfContents: bookTableOfContents, content: bookContent }));
} else {
// 否则保存新书籍信息
localStorage.setItem(bookTitle, JSON.stringify({ tableOfContents: bookTableOfContents, content: bookContent }));
}
// 清空表单字段
bookTitleInput.value = "";
bookTableOfContentsTextarea.value = "";
bookContentTextarea.value = "";
});
// 显示历史书籍列表
function showBook(bookType) {
if (bookType === "history") {
historyBooksDiv.style.display = "block";
} else {
historyBooksDiv.style.display = "none";
}
}
// 读取历史书籍列表
function loadHistoryBooks() {
historyBookSelect.innerHTML = "";
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const option = document.createElement("option");
option.value = key;
option.textContent = key;
historyBookSelect.appendChild(option);
}
}
// 读取历史书籍信息
function loadHistoryBook(bookTitle) {
const historyBookInfo = localStorage.getItem(bookTitle);
if (historyBookInfo) {
const { tableOfContents, content } = JSON.parse(historyBookInfo);
bookTableOfContentsTextarea.value = tableOfContents;
bookContentTextarea.value = content;
}
}
// 读取书籍标题列表
function loadBookTitles() {
readBookTitleSelect.innerHTML = "";
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const option = document.createElement("option");
option.value = key;
option.textContent = key;
readBookTitleSelect.appendChild(option);
}
}
// 读取书籍目录
function loadTableOfContents(bookTitle) {
const bookInfo = localStorage.getItem(bookTitle);
if (bookInfo) {
const { tableOfContents } = JSON.parse(bookInfo);
readTableOfContentsTextarea.value = tableOfContents;
currentPage = 1; // 重置页数
displayContent(bookTitle, currentPage);
}
}
// 显示书籍内容
function displayContent(bookTitle, page) {
const bookInfo = localStorage.getItem(bookTitle);
if (bookInfo) {
const { content } = JSON.parse(bookInfo);
const lines = content.split("\n");
const startIndex = (page - 1) * linesPerPage;
const endIndex = startIndex + linesPerPage;
const pageContent = lines.slice(startIndex, endIndex).join("\n");
readContentTextarea.value = pageContent;
pageInfoSpan.textContent = `Page ${page}`;
prevPageButton.disabled = page === 1;
nextPageButton.disabled = endIndex >= lines.length;
}
}
// 分页功能
function changePage(delta) {
currentPage += delta;
displayContent(readBookTitleSelect.value, currentPage);
}
// 初始化页面
showBook(bookTypeSelect.value);
loadHistoryBooks();
loadBookTitles();
loadTableOfContents(readBookTitleSelect.value);
});
```
在上述代码中，我们完成了写书和读书的功能，包括保存书籍信息、加载历史书籍、选择历史书籍并填充内容、选择书籍并填充目录，以及分页显示书籍内容的功能。请根据你的需求进一步调整和改进代码。
确保将上述 JavaScript 代码保存为 `book.js` 并与 `book.html` 文件一起使用。此外，根据需要可以添加更多的错误处理和界面美化。
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
