readerContent：：-webkit-scrollbar {
background: #a0aec0;
}
/*动画效果*/
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
/*响应式设计*/
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.reader-content {
font-size: 14px;
padding: 1rem;
}
}
project_name=小说阅读网站
filename=script.js
title=网站交互逻辑
entrypoint=false
runnable=false
project_final_file=true
class NovelManager {
constructor() {
this.novels = this.loadNovels();
this.currentNovel = null;
this.currentChapter = 0;
this.fontSize = 16;
this.init();
}
init() {
this.renderNovels();
this.bindEvents();
this.applySavedSettings();
}
loadNovels() {
const saved = localStorage.getItem('novels');
if (saved) {
return JSON.parse(saved);
}
// 默认小说数据
return [
{
id: 1,
title: '星辰变',
author: '我吃西红柿',
genre: '玄幻',
cover: 'https://picsum.photos/300/400?random=1',
description: '一名孩童，天生无法修炼内功。为了得到父亲的重视关注，他毅然选择了修炼痛苦艰难的外功。春去秋来，时光如梭，这个孩童长大了……变成了一名青年，真正改变他的命运，是一颗流星化作的神秘晶石——流星泪。',
chapters: [
'第一章 秦羽',
'第二章 修炼',
'第三章 奇遇',
'第四章 突破',
'第五章 星辰大海'
],
content: [
'这是一个关于修炼与成长的故事。主角秦羽天生无法修炼内功，但他从未放弃。在无数个日夜里，他坚持修炼外功，汗水浸透了衣衫，疼痛折磨着身体，但他的眼神始终坚定。',
'修炼之路充满艰辛。秦羽每天都要进行高强度的体能训练，从基础的拳法到复杂的兵器使用，他一样都不落下。虽然进度缓慢，但他相信勤能补拙。',
'命运的转折出现在一个雨夜。一颗流星划过天际，化作神秘的晶石落入秦羽手中。这块晶石散发着奇异的光芒，蕴含着强大的能量。',
'借助流星泪的力量，秦羽终于突破了修炼的瓶颈。他的实力飞速提升，原本无法企及的境界如今触手可及。',
'秦羽踏上了新的征程，他的目标是星辰大海。前方等待他的是更多的挑战和机遇，但他已经做好了准备。'
]
},
{
id: 2,
title: '都市神医',
author: '医者仁心',
genre: '都市',
cover: 'https://picsum.photos/300/400?random=2',
description: '普通青年意外获得上古医术传承，从此开启不一样的人生。救死扶伤，悬壶济世，在都市中书写传奇。',
chapters: [
'第一章 意外传承',
'第二章 初露锋芒',
'第三章 医院风波',
'第四章 名声大噪',
'第五章 医者仁心'
],
content: [
'林风是一个普通的医学院学生，直到那天他在古玩市场偶然得到了一本古籍。书中记载着失传已久的上古医术，改变了他的命运。',
'第一次使用医术是在地铁上，一位老人突发心脏病。林风运用古籍中的急救手法，成功挽救了老人的生命。',
'在医院实习期间，林风用独特的医术治愈了多个疑难杂症，引起了医学界的关注。',
'随着名声越来越大，林风开设了自己的诊所，为更多需要帮助的人提供医疗服务。',
'林风始终记得医者仁心的初心，用自己的医术回报社会，帮助更多需要帮助的人。'
]
},
{
id: 3,
title: '星河之恋',
author: '星空漫游者',
genre: '科幻',
cover: 'https://picsum.photos/300/400?random=3',
description: '在遥远的未来，人类已经能够自由穿梭于星际之间。一段跨越星系的爱情故事就此展开。',
chapters: [
'第一章 星际相遇',
'第二章 文化冲突',
'第三章 共同冒险',
'第四章 生死考验',
'第五章 永恒誓言'
],
content: [
'在银河联邦的首都星，来自地球的工程师李阳遇见了来自仙女座的外交官星月。两个不同文明的生命体，在星际港口不期而遇。',
'文化的差异让两人在相处中产生了不少误会和冲突，但也正是这些差异让他们互相吸引。',
'一次意外的星际探险任务让两人不得不携手合作，在危机四伏的未知星系中共同面对挑战。',
'在生死关头，李阳不顾个人安危救了星月，这份勇气和真诚打动了星月的心。',
'最终，两人克服了重重困难，在璀璨的星河下许下了永恒的誓言。'
]
}
];
}
saveNovels() {
localStorage.setItem('novels', JSON.stringify(this.novels));
}
renderNovels() {
const container = document.querySelector('.grid');
container.innerHTML = '';
this.novels.forEach(novel => {
const card = this.createNovelCard(novel);
container.appendChild(card);
});
}
createNovelCard(novel) {
const card = document.createElement('div');
card.className = 'novel-card bg-white rounded-xl shadow-lg overflow-hidden fade-in';
card.innerHTML = `
ovel.title}小说封面"="-full h-48 object-cover"
`;
card.querySelector('.read-btn').addEventListener('click', () => {
this.openReader(novel);
});
return card;
}
openReader(novel) {
this.currentNovel = novel;
this.currentChapter = 0;
this.updateReader();
document.getElementById('readerModal').classList.remove('hidden');
}
updateReader() {
if (!this.currentNovel) return;
document.getElementById('novelTitle').textContent =
`${this.currentNovel.title} - ${this.currentNovel.chapters[this.currentChapter]}`;
const contentDiv = document.getElementById('readerContent');
contentDiv.innerHTML = `
${this.currentNovel.content[this.currentChapter]}
`;
}
bindEvents() {
// 搜索功能
document.getElementById('searchBtn').addEventListener('click', () => {
this.handleSearch();
});
document.getElementById('searchInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.handleSearch();
}
});
// 分类筛选
document.getElementById('genreFilter').addEventListener('change', () => {
this.handleSearch();
});
// 阅读器控制
document.getElementById('closeReader').addEventListener('click', () => {
document.getElementById('readerModal').classList.add('hidden');
});
document.getElementById('prevChapter').addEventListener('click', () => {
if (this.currentChapter > 0) {
this.currentChapter--;
this.updateReader();
}
});
document.getElementById('nextChapter').addEventListener('click', () => {
if (this.currentChapter < this.currentNovel.chapters.length - 1) {
this.currentChapter++;
this.updateReader();
}
});
// 字体大小调整
document.getElementById('fontSmaller').addEventListener('click', () => {
if (this.fontSize > 12) {
this.fontSize -= 2;
this.updateFontSize();
}
});
document.getElementById('fontLarger').addEventListener('click', () => {
if (this.fontSize < 24) {
this.fontSize += 2;
this.updateFontSize();
}
});
// 主题切换
document.getElementById('themeToggle').addEventListener('click', () => {
this.toggleTheme();
});
// 点击模态框外部关闭
document.getElementById('readerModal').addEventListener('click', (e) => {
if (e.target.id === 'readerModal') {
document.getElementById('readerModal').classList.add('hidden');
}
});
}
handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const genreFilter = document.getElementById('genreFilter').value;
const filteredNovels = this.novels.filter(novel => {
const matchesSearch = novel.title.toLowerCase().includes(searchTerm) ||
novel.author.toLowerCase().includes(searchTerm) ||
novel.description.toLowerCase().includes(searchTerm);
const matchesGenre = !genreFilter || novel.genre === genreFilter;
return matchesSearch && matchesGenre;
});
this.renderFilteredNovels(filteredNovels);
}
renderFilteredNovels(novels) {
const container = document.querySelector('.grid');
container.innerHTML = '';
if (novels.length === 0) {
container.innerHTML = `
`;
return;
}
novels.forEach(novel => {
const card = this.createNovelCard(novel);
container.appendChild(card);
});
}
updateFontSize() {
const content = document.querySelector('#readerContent .reader-content');
if (content) {
content.style.fontSize = `${this.fontSize}px`;
}
document.getElementById('fontSize').textContent = `${this.fontSize}px`;
this.saveSettings();
}
toggleTheme() {
document.body.classList.toggle('dark');
const icon = document.querySelector('#themeToggle i');
if (document.body.classList.contains('dark')) {
icon.className = 'fas fa-sun';
} else {
icon.className = 'fas fa-moon';
}
this.saveSettings();
}
applySavedSettings() {
const settings = JSON.parse(localStorage.getItem('readerSettings') || '{}');
this.fontSize = settings.fontSize || 16;
if (settings.darkMode) {
document.body.classList.add('dark');
document.querySelector('#themeToggle i').className = 'fas fa-sun';
}
}
saveSettings() {
const settings = {
fontSize: this.fontSize,
darkMode: document.body.classList.contains('dark')
};
localStorage.setItem('readerSettings', JSON.stringify(settings));
}
addNovel(novelData) {
const newNovel = {
id: Date.now(),
...novelData,
chapters: novelData.chapters || [],
content: novelData.content || []
};
this.novels.push(newNovel);
this.saveNovels();
this.renderNovels();
}
deleteNovel(novelId) {
this.novels = this.novels.filter(novel => novel.id !== novelId);
this.saveNovels();
this.renderNovels();
}
}
// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
window.novelManager = new NovelManager();
});
// 键盘快捷键支持
document.addEventListener('keydown', (e) => {
const readerModal = document.getElementById('readerModal');
if (readerModal.classList.contains('hidden')) return;
switch(e.key) {
case 'Escape':
readerModal.classList.add('hidden');
break;
case 'ArrowLeft':
if (window.novelManager.currentChapter > 0) {
window.novelManager.currentChapter--;
window.novelManager.updateReader();
}
break;
case 'ArrowRight':
if (window.novelManager.currentChapter < window.novelManager.currentNovel.chapters.length - 1) {
window.novelManager.currentChapter++;
window.novelManager.updateReader();
}
break;
}
});
这个小说阅读网站具有以下功能和特点：
1.完整的响应式设计：适配各种设备屏幕尺寸，确保在手机、平板和电脑上都有良好的阅读体验
2.小说管理功能：支持搜索、分类筛选，可以浏览小说库中的所有作品
3.现代化阅读器：提供章节导航、字体大小调整、暗色模式切换等功能
4.数据持久化：使用localStorage保存用户设置和小说数据
5.丰富的交互体验：包含悬停效果、动画过渡、键盘快捷键支持等
6.视觉设计：采用渐变色彩、阴影效果、圆角设计，界面美观大方
7.模块化架构：使用面向对象编程方式组织代码，便于维护和扩展
用户可以直接打开index.html文件使用该网站，所有功能都可以在浏览器中正常运行。
