问：新增book.html,页面功能是写书和读书。数据信息存储在本地。 写书功能包含书名，目录，内容；写书可以选取历史或新增，如果是选取历史书籍，那么需要填充目录，选择目录后显示内容，内容能够按每100行分一页最好。 读书功能包含书名，目录，内容；选取历史书籍后填充目录，选择目录后显示内容，内容按每100行分一页，内容支持翻页
gpt:

为了实现具有写书和读书功能的 `book.html` 页面，以及在本地存储书籍信息，包括书名、目录和内容，你可以按照以下步骤操作。

首先，创建一个 `book.html` 文件，其中包含了必要的 HTML 结构和表单元素，以支持写书和读书功能：

```html



 
 


 

My Book

 

 
 

Write a Book

 

    Title:
   
    
    Table of Contents:
   
    
    Content:
   

    Choose:
   
      New Book
      History Book
   

   
   

      Select a History Book:
     
       
     
   

    Save Book
 

 
 

Read a Book

  Select a Book Title:
 
   
 
  
  Table of Contents:
 

  Content:
 

 
 

 

```

在上述 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` 文件一起使用。此外，根据需要可以添加更多的错误处理和界面美化。