ホームページ作成について質問です。

複数の<object data="~ ...></object>を1ページ内の部分にランダムに表示させたいのですが、どのような方法があるのでしょうか。JavaScriptで画像や文字をランダム表示させる方法で応用しようとしましたができませんでした。どうぞよろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2011/06/15 16:43:35
  • 終了:2011/06/15 23:28:22

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/06/15 17:29:08

ポイント150pt

どういう感じで実装したいのかを汲み取るために、試したコードを示して欲しかったのですが、

以下のようなサンプルを書いてみました。

配列を使えば、いちいち変数を作る必要がありません。


demo: http://jsfiddle.net/GwSet/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script>
onload = function() {
var srcs = [
	'<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/B7ZUHbLHMBs?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/B7ZUHbLHMBs?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>',
	'<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/GEoPUATj9ig?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GEoPUATj9ig?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>',
	'<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/01tL_YOsrCo?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/01tL_YOsrCo?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>'	
];
var object = document.createElement('div');
object.innerHTML = srcs[Math.floor( Math.random() * srcs.length)];
document.getElementById('contents').appendChild(object);
}
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
id:numb08

思っていたものが完璧にできました。本当にありがとうございました。

2011/06/15 23:27:55

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/06/15 17:29:08ここでベストアンサー

ポイント150pt

どういう感じで実装したいのかを汲み取るために、試したコードを示して欲しかったのですが、

以下のようなサンプルを書いてみました。

配列を使えば、いちいち変数を作る必要がありません。


demo: http://jsfiddle.net/GwSet/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script>
onload = function() {
var srcs = [
	'<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/B7ZUHbLHMBs?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/B7ZUHbLHMBs?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>',
	'<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/GEoPUATj9ig?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GEoPUATj9ig?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>',
	'<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/01tL_YOsrCo?version=3&amp;hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/01tL_YOsrCo?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>'	
];
var object = document.createElement('div');
object.innerHTML = srcs[Math.floor( Math.random() * srcs.length)];
document.getElementById('contents').appendChild(object);
}
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
id:numb08

思っていたものが完璧にできました。本当にありがとうございました。

2011/06/15 23:27:55
id:Endows No.2

えんどう回答回数169ベストアンサー獲得回数72011/06/15 17:44:55

ポイント52pt

少々複雑ですが、変数内にランダム表示させたいデータを入力し、乱数で出力された数値でデータを定義すればランダム表示が可能です。


var (☆)0="(Object)";
var (☆)1="(Object)";
var (☆)2="(Object)";
・
・
・
(乱数の変数名)=Math.floor(Math.random()*[上で定義した変数の数]);
(出力用の変数名)=varで定義した変数名+(乱数の変数名)


部分表示させたい場所に適当にDivまたはSpanを埋め込んで↓

document.getElementById("ID名").innerHTML=(☆)+(出力用の変数名);

例↓


JavaScript

var naiyou0="あああ";
var naiyou1="いいい";
var naiyou2="ううう";

n=Math.floor(Math.random()*3);
syutu=naiyou+n;
document.getElementById("ran").innerHTML=syutu;


HTML

<div id="ran"></div>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません