随机书籍推荐器：使用 JavaScript 实现

本文将指导你如何使用 JavaScript 创建一个简单的随机书籍推荐器。通过点击按钮，页面将随机展示不同的书籍封面图片。我们将基于已有的随机名言生成器代码，将其改造为随机书籍推荐器，并避免重复推荐同一本书籍。

HTML 结构

首先，我们需要创建一个 HTML 结构来展示书籍封面和一个按钮，用户可以通过点击按钮来获取新的书籍推荐。

<div class="books">
  <h1 class="book-generator">随机书籍推荐</h1>
  <div id="bookDisplay">
    <img id="bookCover" style='width: 200px' src='' alt="书籍封面">
  </div>
  <button onclick="newBook()" class="button-book">推荐一本新书</button>
  <script src="./js/books.js"></script>
</div>

在这个 HTML 结构中，我们创建了一个 div 容器，包含一个标题 h1，一个用于展示书籍封面的 img 标签，以及一个按钮 button。img 标签的 id 设置为 bookCover，用于在 JavaScript 代码中引用和更新图片。style 属性用于设置图片的初始宽度，alt 属性用于在图片无法加载时显示替代文本。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现随机书籍推荐的逻辑。

立即学习“Java免费学习笔记（深入）”；

Giiso写作机器人

Giiso写作机器人，让写作更简单

56

查看详情

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 操作、事件处理和随机数生成等概念。

以上就是随机书籍推荐器：使用 JavaScript 实现的详细内容，更多请关注php中文网其它相关文章！