人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで時間帯によって表示画像を切り替えつつ、さらにアクセス毎にランダムに表示画像を変えるにはどうすれば良いでしょうか。
それぞれの時間帯に対して複数の画像を用意するようなイメージです。


●質問者: ha_te_na_com
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript アクセス イメージ ランダム 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● munyaX
●50ポイント ベストアンサー

ちゃんとテストしてないですが、以下のような感じでどうでしょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Image</title>
<script>
var list = {
 '0':[
 {'src':'image/foo1.jpg', 'alt':'foo1', 'width':'100', 'height':'100'}
 , {'src':'image/foo2.jpg', 'alt':'foo2', 'width':'100', 'height':'100'}
 , {'src':'image/foo3.jpg', 'alt':'foo3', 'width':'100', 'height':'100'}
 ]
 , '1':[
 {'src':'image/bar1.jpg', 'alt':'bar1', 'width':'100', 'height':'100'}
 , {'src':'image/bar2.jpg', 'alt':'bar2', 'width':'100', 'height':'100'}
 ]
 , 'default':[
 {'src':'image/default.jpg', 'alt':'default', 'width':'100', 'height':'100'}
 ]
};

function hourImage(){
 var today = new Date();
 var hour = today.getHours();
 var i = 0;

 //未設定時
 if(!list[hour]) hour = 'default';
 
 //要素決定
 i = Math.floor(Math.random() * list[hour].length);

 //表示
 document.write('<img src="'+ list[hour][i]['src'] + '" '
 +' width="'+ list[hour][i]['width'] + '" '
 +' height="'+ list[hour][i]['height'] + '" '
 +' alt="'+ list[hour][i]['alt'] + '" '
 +'>'
 );
}

</script>
</head>
<body>

<script>hourImage();</script>

</body>
</html>
◎質問者からの返答

ありがとうございます!動作確認できました。

javascriptの事を分かっていないため、ホントに好奇心での質問になってしまうのですが、現在、一時間毎に設定するような形かと思いますが、これに「1時〜4時」のように幅を持たせたい場合、ソースをコンパクトにまとめるにはどうすれば良いでしょうか。

面倒な話になるようでしたらスルーで構いません…。


2 ● munyaX
●50ポイント

>「1時〜4時」のように幅を持たせたい場合

色々方法はあるのですが、たとえば以下のところをcase文にしてやればよいかと思います。

 //未設定時
 if(!list[hour]) hour = 'default';
 switch(hour)
 case 1:
 case 2:
 case 3:
 case 4:
 hour = 4; 
 break;

 default:
 if(!list[hour]) hour = 'default';

もしくは素直にif?else if?elseで書いてやるか、

 if( 1 <= hour && hour <= 4 )
 hour = 4; 
 else
 if(!list[hour]) hour = 'default';

データ構造を組み直す方法もあります。

◎質問者からの返答

勉強になりました。ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ