本文将指导你如何使用 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 twicefunction 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 实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525966.html
微信扫一扫 
支付宝扫一扫 
