CGI-BBS > JAVA/JavaScript > JavaScript > JavaScriptで、画像を時刻によってランダムに表示したい。


カレッヂ
カレッヂ


質問者 ゆうき  投稿日 2004/4/5(月) 10:30:52 
java scriptで、１時間ごとに画像を表示させ、さらにそれが４つくらいの画像からランダムに表示されるということは可能でしょうか。

例えば８〜９時の間は、"ohayou.gif","asagohan.gif","suzume.gif","niwatori.gif"の中から読み込むたびにランダムに表示され、９〜１０時になるとまた別の４枚がランダムに表示されるといった形です。
それぞれ、「時刻によって画像を表示」、「ランダムに画像を表示」という形はみるのですが、組み合わせることは可能なのでしょうか。

よろしくお願い致します。

プロバイダ参照：http://www.linkclub.jp/faq/
サーバのＯＳ：(未選択)
パソコンのＯＳ：(未選択)
エディタ：dream weaver4.0
ＦＴＰソフト：fetch
サーバ移転：していない
改造：(未選択)
ＣＧＩ習熟度：(未選択)

回答者 sim  [削除]  投稿日 2004/4/5(月) 12:52:33 
<script language="JavaScript">
now = new Date();
img = new Array(24);//0〜23までの時間ごとの配列

img[12] = new Array('a.gif','b.gif','c.gif','d.gif');//24つ分のこんな配列を作成

function ChangeImg(){
	t = now.getHours();//時間
	ran = parseInt(4 * Math.random());//ランダム
	document.getElementById('img').src=img[t][ran];//画像
}
</script>

汚いのですが多分こんなので動くんじゃないかと。。
質問者 ゆうき  [削除]  投稿日 2004/4/5(月) 18:28:45 
迅速な返信、本当にありがとうございます。
早速試させて頂いたのですが・・うまく表示されませんでした。

<html>
<head>
<title>javatest</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">

now = new Date();
img = new Array(24);//0〜23までの時間ごとの配列
img[0] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[1] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[2] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[3] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[4] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[5] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[6] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[7] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[8] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[9] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[10] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[11] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[12] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[13] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[14] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[15] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[16] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[17] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[18] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[19] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[20] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[21] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');
img[22] = new Array('16a.gif','16b.gif','16c.gif','16d.gif');
img[23] = new Array('17a.gif','17b.gif','17c.gif','17d.gif');//24つ分のこんな配列を作成

function ChangeImg(){
	t = now.getHours();//時間
	ran = parseInt(4 * Math.random());//ランダム
	document.getElementById('img').src=img[t][ran];//画像
}
</script>
</body>
</html>

として、htmlファイルと画像ファイル（テストのため16a~d、17a~dを用意したのみですが）を同じフォルダにおきました。
自分でもいろいろと試みてみますが、
もし何かお気づきの点等がありましたら、何かアドバイス頂けると嬉しいです。
回答者 sim  [削除]  投稿日 2004/4/5(月) 18:47:53 
記述はそのようなものでよろしいかと思います。

1.ChangeImg()を動かします。
<body>tagにonload属性をつけてあげるとよろしいかと思います。

<body bgcolor="#FFFFFF" text="#000000" onload="ChangeImg();">

2.画像を書きます。
<body></body>内にIMGタグで画像を用意します。
idをimgとしなくてはいけません。dmy.gifの部分は何でもいいかと思います。

<img id=img src="dmy.gif">

3.直接JavaScriptで書いてしまってもいいかもしれません。
document.getElementById('img').src=img[t][ran];の代わりに下記を使います。

document.write('<img src="' + img[t][ran]　 + '">');
質問者 ゆうき  [削除]  投稿日 2004/4/5(月) 19:30:14 
ありがとうございます！
記述の通り行ったところ、表示されました。
お忙しいところ何度もご回答頂き、本当にありがとうございました。
感謝の気持ちでいっぱいです。

このページは終了したので返信(回答)は書きこめません
 

Ｗｅｂ裏技