当前位置：首页 > JavaScript

js实现看书

2026-03-15 08:45:05JavaScript

使用JavaScript实现电子书阅读功能

通过JavaScript可以实现一个简单的电子书阅读器，以下是核心实现方法：

基础HTML结构

<div id="ebook-reader">
  <div id="book-content"></div>
  <button id="prev-btn">上一页</button>
  <button id="next-btn">下一页</button>
  <span id="page-indicator">1/10</span>
</div>

CSS样式设置

#ebook-reader {
  width: 800px;
  margin: 0 auto;
  font-family: 'Georgia', serif;
}
#book-content {
  height: 600px;
  padding: 20px;
  overflow-y: auto;
  border: 1px solid #ddd;
  line-height: 1.6;
}

JavaScript核心逻辑

js实现看书

// 电子书数据
const bookChapters = [
  "第一章内容...",
  "第二章内容...",
  // 更多章节...
];

let currentPage = 0;

function renderPage() {
  document.getElementById('book-content').innerHTML = bookChapters[currentPage];
  document.getElementById('page-indicator').textContent = 
    `${currentPage + 1}/${bookChapters.length}`;
}

document.getElementById('next-btn').addEventListener('click', () => {
  if(currentPage < bookChapters.length - 1) {
    currentPage++;
    renderPage();
  }
});

document.getElementById('prev-btn').addEventListener('click', () => {
  if(currentPage > 0) {
    currentPage--;
    renderPage();
  }
});

// 初始化
renderPage();

增强功能实现

添加本地存储记忆功能

// 保存阅读进度
function saveProgress() {
  localStorage.setItem('bookProgress', currentPage);
}

// 加载时读取进度
window.addEventListener('load', () => {
  const savedPage = localStorage.getItem('bookProgress');
  if(savedPage) {
    currentPage = parseInt(savedPage);
    renderPage();
  }
});

// 修改翻页函数添加保存
function turnPage(direction) {
  // ...原有翻页逻辑
  saveProgress();
}

实现文本搜索功能

function searchText(keyword) {
  const results = [];
  bookChapters.forEach((text, index) => {
    if(text.includes(keyword)) {
      results.push({
        chapter: index,
        positions: getPositions(text, keyword)
      });
    }
  });
  return results;
}

function getPositions(text, keyword) {
  const positions = [];
  let pos = text.indexOf(keyword);
  while(pos !== -1) {
    positions.push(pos);
    pos = text.indexOf(keyword, pos + 1);
  }
  return positions;
}

响应式设计改进

添加媒体查询适应移动设备

js实现看书

@media (max-width: 768px) {
  #ebook-reader {
    width: 95%;
  }
  #book-content {
    height: 400px;
  }
}

添加触摸事件支持

let touchStartX = 0;

document.getElementById('book-content').addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
});

document.getElementById('book-content').addEventListener('touchend', (e) => {
  const touchEndX = e.changedTouches[0].clientX;
  if(touchStartX - touchEndX > 50) {
    // 向左滑动-下一页
    document.getElementById('next-btn').click();
  } else if(touchEndX - touchStartX > 50) {
    // 向右滑动-上一页
    document.getElementById('prev-btn').click();
  }
});

性能优化建议

实现分页预加载

const preloadPages = 2;
function preloadAdjacentPages() {
  for(let i = 1; i <= preloadPages; i++) {
    if(currentPage + i < bookChapters.length) {
      // 预加载逻辑
    }
    if(currentPage - i >= 0) {
      // 预加载逻辑
    }
  }
}

使用虚拟滚动处理长章节

// 仅渲染可视区域内容
function renderVisibleContent() {
  const scrollTop = document.getElementById('book-content').scrollTop;
  const viewportHeight = document.getElementById('book-content').clientHeight;
  // 计算需要渲染的文本范围
  // 动态更新DOM内容
}

以上实现提供了电子书阅读的基本功能，可以根据需要进一步扩展添加书签、夜间模式、字体调整等增强功能。

标签: js