- ベストアンサー
テーブルで画像+文字+リンクをランダム表示させる
HTMLでサイトを作ろうとしています。 DreamWeaverを利用し、XAMPPでサーバを構築するところまで終了しています。 質問内容なんですが いくつかある画像(リンク有)+リンク文字+テキストを1セットとしてテーブル内に3つずつ被らずランダムに表示させる方法をご教授願いたいです。 テーブルは横に3つ並んだ状態がいいです。 自分で調べてみたのですがよくわからなかったんです… 見てのとおり初心者なので我侭ですが優しく詳しく教えていただきたいです。 よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10117086670 この人？ 今回の質問にDWやXAMPPが何も関係ないってことすら分からんレベルの癖に贅沢言わないでくれないかな… 初心者ですって言えば何でも許されると思ったら大間違いですよ。 ・「ランダムに1つ」ならできて「重複なしで3つ」ができないのか ・「1つ」ならできて「3つ」ができないのか ・そもそもランダムができないのか ・「何を」調べて「何が」分からなかったのか どこまでできて何ができないのかをはっきり言わないと、結局一から十まで教えることになり、宿題を丸投げしてくる小中学生と同レベルです。 何も分からなくて他人に頼るなら、せめてそれくらいは自分で努力してくださいね。 ご希望のプログラムを組むには「配列」「乱数」「HTMLへの出力」などの知識が必要ですが、どれもまったく知らないんでしょ？ 初心者が高望みなどせず、順番に覚えなさい。 まずは「配列」について理解しましょう。 次に「乱数」について理解しましょう。 そうすると「配列の中のどれかをランダムにひとつ取得」ができるようになります。 次に、HTMLへの出力を覚えます。 出力するためには、出力する「もの」を作成することと、出力先を取得することが必要になります。 まずは空の<body>内に文字を出力することから始めましょう。 慣れてくれば、特定の場所（今回で言えば特定のテーブルセル内）に特定の要素を入れることができるようになります。 これを組み合わせると「配列の中からランダムに3つを特定の場所に出力」ができます。 これくらいのレベルに来てやっと「重複なく3つ」に手を出せます。 JavaScriptには標準で「配列のある要素を取得し、それは配列から削除する」という機能がありますので、インデックスに乱数を与えてこれを3回行えば「重複なくランダムに3つ」が実現できます。 どうですか？ 「何も分かりません全部教えてください」って言ったからって簡単に教えられるような内容じゃない（あなたレベルの人にとって）ことが分かりましたか？ 悪いことは言わないからできることからやりましょう。 ※下記が動作としてはあなたの希望通りであることを確認してください。 <html> <head> <script> window.onload = function(){ var list = new Array( '<img src="画像1.jpg" alt="sample1" width="170" height="200">\n<p><a href="画像1.html">説明1</a></p>\n<p>詳細1</p>', '<img src="画像2.jpg" alt="sample2" width="170" height="200">\n<p><a href="画像2.html">説明2</a></p>\n<p>詳細2</p>', '<img src="画像3.jpg" alt="sample3" width="170" height="200">\n<p><a href="画像3.html">説明3</a></p>\n<p>詳細3</p>', '<img src="画像4.jpg" alt="sample4" width="170" height="200">\n<p><a href="画像4.html">説明4</a></p>\n<p>詳細4</p>', '<img src="画像5.jpg" alt="sample5" width="170" height="200">\n<p><a href="画像5.html">説明5</a></p>\n<p>詳細5</p>', '<img src="画像6.jpg" alt="sample6" width="170" height="200">\n<p><a href="画像6.html">説明6</a></p>\n<p>詳細6</p>', '<img src="画像7.jpg" alt="sample7" width="170" height="200">\n<p><a href="画像7.html">説明7</a></p>\n<p>詳細7</p>', '<img src="画像8.jpg" alt="sample8" width="170" height="200">\n<p><a href="画像8.html">説明8</a></p>\n<p>詳細8</p>', '<img src="画像9.jpg" alt="sample9" width="170" height="200">\n<p><a href="画像9.html">説明9</a></p>\n<p>詳細9</p>' ); for(i=1;i<=3;i++){ document.getElementById("td" + i).innerHTML = list.splice(Math.floor(Math.random() * (list.length-1)),1); } } </script> <title>test</title> </head> <body> <table border="1"> <tr><td width="265" id="td1"></td><td width="265" id="td2"></td><td width="265" id="td3"></td></tr> </table> </body> </html>
お礼
何度も何度もすいませんでした。 無事作ることができました。 ありがとうございます。