本文将指导你如何使用 JavaScript 创建一个简单的随机书籍推荐器。通过点击按钮，页面将随机展示不同的书籍封面图片。我们将基于已有的随机名言生成器代码，将其改造为随机书籍推荐器，并避免重复推荐同一本书籍。
HTML 结构
首先，我们需要创建一个 HTML 结构来展示书籍封面和一个按钮，用户可以通过点击按钮来获取新的书籍推荐。
随机书籍推荐
@@##@@
在这个 HTML 结构中，我们创建了一个 div 容器，包含一个标题 h1，一个用于展示书籍封面的 img 标签，以及一个按钮 button。img 标签的 id 设置为 bookCover，用于在 JavaScript 代码中引用和更新图片。style 属性用于设置图片的初始宽度，alt 属性用于在图片无法加载时显示替代文本。
JavaScript 代码
接下来，我们需要编写 JavaScript 代码来实现随机书籍推荐的逻辑。
立即学习“Java免费学习笔记（深入）”；
var images = [
'https://m.media-amazon.com/images/I/81jRqrKKObL._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/81JgX8VgZiL._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/71CBWHK035L._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/91pXKpUfGgL._AC_UL800_FMwebp_QL65_.jpg',
];
let lastBook = -1; // this is to prevent offering the same book twice
function newBook() {
let randomNumber;
do {
randomNumber = Math.floor(Math.random() * (images.length));
} while (randomNumber === lastBook);
lastBook = randomNumber;
document.getElementById('bookCover').src = images[randomNumber];
}这段 JavaScript 代码首先定义了一个 images 数组，其中包含了书籍封面图片的 URL。然后，定义了一个 lastBook 变量，用于记录上次推荐的书籍的索引，防止重复推荐。
newBook 函数是核心逻辑所在。它首先生成一个随机数 randomNumber，然后使用 do...while 循环来确保新生成的随机数与上次推荐的书籍的索引不同。如果相同，则重新生成随机数，直到找到一个不同的索引为止。最后，更新 lastBook 变量，并将 bookCover 元素的 src 属性设置为新的书籍封面图片的 URL。
代码解释
- images 数组: 存储书籍封面图片的 URL 地址。你可以根据需要添加或修改这些 URL。
- lastBook 变量: 初始化为 -1，表示还没有推荐过任何书籍。
-
newBook 函数:
- 使用 Math.random() 和 Math.floor() 生成一个随机整数，作为 images 数组的索引。
- 使用 do...while 循环确保生成的随机数与 lastBook 不同，防止重复推荐。
- 更新 lastBook 的值为当前推荐的书籍的索引。
- 使用 document.getElementById('bookCover') 获取 img 元素，并将其 src 属性设置为 images[randomNumber]，从而更新书籍封面图片。
注意事项
- 确保 books.js 文件正确链接到 HTML 文件中。
- 可以根据需要调整书籍封面图片的尺寸和样式。
- 可以扩展此代码，例如添加书籍的标题、作者等信息。
- 为了更好的用户体验，可以考虑在加载图片时显示一个加载动画。
- 如果需要从服务器动态获取书籍信息，可以使用 AJAX 技术。
总结
通过以上步骤，我们成功创建了一个简单的随机书籍推荐器。这个推荐器可以随机展示不同的书籍封面图片，并且避免重复推荐同一本书籍。你可以根据自己的需求进行修改和扩展，例如添加更多的书籍信息、使用不同的图片来源等。这个项目可以作为学习 JavaScript 和前端开发的入门练习，帮助你更好地理解 DOM 操作、事件处理和随机数生成等概念。
