随机书籍推荐器：使用 J*aScript 实现

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

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

HTML 结构

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

<div class="books">
  <h1 class="book-generator">随机书籍推荐</h1>
  <div id="bookDisplay">
    @@##@@
  </div>
  <button onclick="newBook()" class="button-book">推荐一本新书</button>
  <script src="./js/books.js"></script>
</div>

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

J*aScript 代码

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

YouMind

AI内容创作和信息整理平台

207 查看详情 YouMind

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];
}

这段 J*aScript 代码首先定义了一个 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 技术。

总结

通过以上步骤，我们成功创建了一个简单的随机书籍推荐器。这个推荐器可以随机展示不同的书籍封面图片，并且避免重复推荐同一本书籍。你可以根据自己的需求进行修改和扩展，例如添加更多的书籍信息、使用不同的图片来源等。这个项目可以作为学习 J*aScript 和前端开发的入门练习，帮助你更好地理解 DOM 操作、事件处理和随机数生成等概念。

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

# 创建一个 # 东宝seo获客预案 # seo 费用 # seo科研研究中心 # 那些网站可以做推广引流 # 软文优化信任乐云seo # 钩鱼网站怎么做推广的 # 运营营销推广话术怎么写 # 厦门网站关键词优化搜索 # zblog php seo # 商家营销推广快闪视频 # 运行机制 # 服务端 # 源代码 # javascript # 加载 # 你可以 # 有什么 # 设置为 # 一本 # 随机数 # 前端开发 # ajax # 前端 # js # html # java

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-03

4008744355

随机书籍推荐器：使用 J*aScript 实现

HTML 结构

J*aScript 代码

代码解释

注意事项

总结

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice