如何将随机名言生成器改造为随机书籍封面生成器？

要实现随机书籍封面展示，只需要对原代码做两处核心修改：替换数据源数组，以及更新生成内容的逻辑。

1. 替换数据源：把名言数组换成书籍封面资源 #

原代码里的quotes数组存储的是文本名言，现在我们把它改成存储书籍封面的图片路径（推荐用对象数组，方便添加图片描述）：

方式一：纯图片路径数组（简单直接） #

// 替换成你实际的图片路径，比如本地images文件夹下的图片
var bookCovers = [
  './images/cassandra_clare_book.jpg',
  './images/louisa_may_alcott_book.jpg',
  './images/suzanne_collins_book.jpg',
  './images/jennifer_lynn_barnes_book.jpg',
  // 继续添加更多书籍封面的路径
];

方式二：对象数组（推荐，包含图片地址和书籍信息） #

这种方式可以给图片添加更友好的alt属性，提升可访问性：

var bookCovers = [
  { src: './images/cassandra_clare_book.jpg', alt: '《骸骨之城》书籍封面' },
  { src: './images/louisa_may_alcott_book.jpg', alt: '《小妇人》书籍封面' },
  { src: './images/suzanne_collins_book.jpg', alt: '《饥饿游戏》书籍封面' },
  { src: './images/jennifer_lynn_barnes_book.jpg', alt: '《继承游戏》书籍封面' },
  // 更多书籍封面条目
];

2. 更新随机展示逻辑：生成图片标签而非文本 #

原newQuote函数是把文本插入到页面，现在我们要生成<img>标签并插入：

对应纯路径数组的函数 #

function newQuote() {
  // 生成随机索引
  var randomIndex = Math.floor(Math.random() * bookCovers.length);
  // 获取选中的图片路径
  var coverPath = bookCovers[randomIndex];
  // 生成img标签，可添加样式限制尺寸
  document.getElementById('quoteDisplay').innerHTML = `<img src="${coverPath}" alt="书籍封面" style="max-width: 300px; height: auto; border-radius: 4px;">`;
}

对应对象数组的函数 #

function newQuote() {
  var randomIndex = Math.floor(Math.random() * bookCovers.length);
  var selectedCover = bookCovers[randomIndex];
  // 使用对象里的src和alt属性
  document.getElementById('quoteDisplay').innerHTML = `<img src="${selectedCover.src}" alt="${selectedCover.alt}" style="max-width: 300px; height: auto; border-radius: 4px;">`;
}

3. 可选优化：调整页面元素文字 #

把HTML里的标题和按钮文字改成对应功能的内容：

<h1 class="quote-generator">Random Book Cover Recommender</h1>
<button onclick="newQuote()" class="button-quote">New Book Cover</button>

4. 额外优化：页面加载时自动显示封面 #

在JS代码末尾添加一行，让页面打开就展示一张封面：

// 页面加载完成后自动调用一次
window.onload = newQuote;

这样点击按钮就会随机切换书籍封面了。

内容的提问来源于stack exchange，提问作者valentina