css 随机书生成器

t0ybt7op  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(171)

这是一个代码,我做了一个随机报价生成器,我想做一个类似的,但与图像这一次。我想在我的页面上放一个资源,它会向你推荐一本书。你必须点击一个按钮,它会随机显示一本书的封面。
对于报价生成器,我这样做了:
HTML:

  1. <div class="quotes">
  2. <h1 class="quote-generator">Simple Quote Generator</h1>
  3. <div id="quoteDisplay"></div>
  4. <button onclick="newQuote()" class="button-quote">New Quote</button>
  5. <script src="./js/quotes.js"></script>
  6. </div>

简体中文

  1. var quotes = [
  2. 'One must always be careful of books,<br>and what is inside them,<br>for words have the power to change us.<br>—Cassandra Clare',
  3. 'Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare',
  4. 'I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott',
  5. 'Nice things don\'t happen in storybooks.<br>Or when they do happen, something bad happens next.<br>Because otherwise the story would be boring, and no one would read it.<br>—Holly Black',
  6. 'You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins',
  7. 'You look best when you\'re you.<br>—Lynn Painter',
  8. '“Everything\’s a game, Avery Grambs.<br>The only thing we get to decide in this life<br>is if we play to win.<br>—Jennifer Lynn Barnes',
  9. '“Why do I have to tell a story?” I asked.<br>“Because if you don\’t tell the story,<br>someone else will tell it for you.”<br>—Jennifer Lynn Barnes',
  10. 'I mean, there\’s a reason all books end right after the couple gets together.<br>No one wants to keep reading long enough to see the happily ever after turn into an unhappily ever after. Right?<br>—Alex Light',
  11. 'Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass',
  12. ]
  13. function newQuote() {
  14. var randomNumber = Math.floor(Math.random() * (quotes.length));
  15. document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  16. }

我怎样才能把变量引号中的引号变成图像呢?

6jygbczu

6jygbczu1#

这可以像下面这样实现。我稍微改进了一下逻辑,以确保同一本书不会提供两次。
请让我知道这是否有帮助。

  1. var images = [
  2. 'https://m.media-amazon.com/images/I/81jRqrKKObL._AC_UL800_FMwebp_QL65_.jpg',
  3. 'https://m.media-amazon.com/images/I/81JgX8VgZiL._AC_UL800_FMwebp_QL65_.jpg',
  4. 'https://m.media-amazon.com/images/I/71CBWHK035L._AC_UL800_FMwebp_QL65_.jpg',
  5. 'https://m.media-amazon.com/images/I/91pXKpUfGgL._AC_UL800_FMwebp_QL65_.jpg',
  6. ];
  7. let lastBook = -1; // this is to prevent offering the same book twice
  8. function newBook() {
  9. let randomNumber;
  10. do {
  11. randomNumber = Math.floor(Math.random() * (images.length));
  12. } while (randomNumber === lastBook);
  13. lastBook = randomNumber;
  14. document.getElementById('bookCover').src = images[randomNumber];
  15. }
  1. <div class="quotes">
  2. <h1 class="quote-generator">Simple Book Generator</h1>
  3. <div id="quoteDisplay">
  4. <img id="bookCover" style='width: 100px' src=''>
  5. </div>
  6. <button onclick="newBook()" class="button-quote">New Book</button>
  7. <script src="./js/quotes.js"></script>
  8. </div>
展开查看全部

相关问题