この記事では、JavaScript を使用して簡単なランダムな書籍レコメンダーを作成する方法を説明します。ボタンをクリックすると、さまざまな本の表紙畫像がランダムに表示されます。既存のランダムな引用ジェネレーターのコードに基づいて、それをランダムな書籍の推奨に変換し、同じ書籍を繰り返し推奨することを回避します。

HTML構(gòu)造

まず、本の表紙と、ユーザーがクリックして新しい本のおすすめを取得できるボタンを表示する HTML 構(gòu)造を作成する必要があります。

 <div class="書籍">
  <h1 class="book-generator">ランダムなおすすめ書籍</h1>
  <div id="bookDisplay">
    <img src="/static/imghw/default1.png" data-src="./js/books.js" class="lazy" id="ランダムブックレコメンダー: JavaScript を使用して実裝"   style="max-width:90%" alt="ランダムブックレコメンダー: JavaScript を使用して実裝">
  </div>
  <button onclick="newBook()" class="button-book">新しい本を勧める</button>
  <script></script>
</div>

この HTML 構(gòu)造では、タイトル h1、本の表紙を表示する img タグ、ボタン button を含む div コンテナを作成します。 img タグの ID は bookCover に設(shè)定され、JavaScript コードで畫像を參照および更新するために使用されます。 style 屬性は畫像の初期幅を設(shè)定するために使用され、alt 屬性は畫像が読み込めない場合に代替テキストを表示するために使用されます。

JavaScriptコード

次に、ランダムな書籍の推奨ロジックを?qū)g裝する JavaScript コードを作成する必要があります。

 var イメージ = [
  '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',
];

lastBook = -1 にします。 // これは同じ本を二度提供することを防ぐためです

関數(shù) newBook() {
    ランダム數(shù)値を許可します。
    する {
      randomNumber = Math.floor(Math.random() * (images.length));
    while (randomNumber === lastBook);
    lastBook = ランダム番號;
    document.getElementById('bookCover').src = 畫像[ランダム番號];
}

この JavaScript コードは、最初に書籍の表紙畫像の URL を含む畫像配列を定義します。次に、最後に推奨された本のインデックスを記録する lastBook 変數(shù)が定義され、推奨が繰り返されるのを防ぎます。

newBook 関數(shù)は、コア ロジックが存在する場所です。まず亂數(shù)randomNumberを生成し、次にdo...whileループを使用して、新しく生成された亂數(shù)が最後に推奨された本のインデックスと異なることを確認します。同じ場合、別のインデックスが見つかるまで亂數(shù)が再生成されます。最後に、lastBook 変數(shù)を更新し、bookCover 要素の src 屬性を新しい本の表紙畫像の URL に設(shè)定します。

コードの説明

• 畫像配列: 書籍の表紙畫像の URL アドレスを格納します。必要に応じて、これらの URL を追加または変更できます。
• lastBook 変數(shù): -1 に初期化され、まだ推奨されている本がないことを示します。
• newBook関數(shù):
  • Math.random() と Math.floor() を使用して、畫像配列のインデックスとしてランダムな整數(shù)を生成します。
  • do...while ループを使用して、生成された亂數(shù)が lastBook と異なることを確認し、推奨事項が繰り返されるのを防ぎます。
  • lastBook の値を、現(xiàn)在推奨されている本のインデックスに更新します。
  • document.getElementById('bookCover') を使用して img 要素を取得し、その src 屬性をimages[randomNumber] に設(shè)定して、本の表紙畫像を更新します。

注意事項

• Books.js ファイルが HTML ファイルに正しくリンクされていることを確認してください。
• 必要に応じて、本の表紙畫像のサイズとスタイルを調(diào)整できます。
• このコードは、本のタイトルや著者などの情報を追加するなどして拡張できます。
• ユーザー エクスペリエンスを向上させるために、畫像を読み込むときに読み込みアニメーションを表示することを検討してください。
• サーバーから書籍情報を動的に取得する必要がある場合は、AJAX テクノロジを使用できます。

要約する

上記の手順により、単純なランダムな書籍レコメンダーが正常に作成されました。このレコメンダーは、異なる本の表紙畫像をランダムに表示し、同じ本を繰り返し推薦することを避けることができます。書籍情報を追加したり、別の畫像ソースを使用したりするなど、獨自のニーズに応じて変更および拡張できます。このプロジェクトは、JavaScript およびフロントエンド開発を?qū)W習(xí)するための入門演習(xí)として使用でき、DOM 操作、イベント処理、亂數(shù)生成などの概念をより深く理解するのに役立ちます。

以上がランダムブックレコメンダー: JavaScript を使用して実裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。