css 随机书生成器

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

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

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

简体中文

var quotes = [
    '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',
    'Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare',
    'I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott',
    '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',
    'You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins',
    'You look best when you\'re you.<br>—Lynn Painter',
    '“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',
    '“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',
    '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',
    'Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass',
] 
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

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

6jygbczu

6jygbczu1#

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

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];
}
<div class="quotes">
  <h1 class="quote-generator">Simple Book Generator</h1>
  <div id="quoteDisplay">
    <img id="bookCover" style='width: 100px' src=''>
  </div>
  <button onclick="newBook()" class="button-quote">New Book</button>
  <script src="./js/quotes.js"></script>
</div>

相关问题