javascriptで時間帯によって表示画像を切り替えつつ、さらにアクセス毎にランダムに表示画像を変えるにはどうすれば良いでしょうか。

それぞれの時間帯に対して複数の画像を用意するようなイメージです。

回答の条件
  • 1人2回まで
  • 登録:2009/01/26 15:07:10
  • 終了:2009/01/26 16:39:24

ベストアンサー

id:munyaX No.1

munyaX回答回数120ベストアンサー獲得回数242009/01/26 15:26:37

ポイント50pt

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

<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>
id:ha_te_na_com

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

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

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

2009/01/26 16:00:43

その他の回答(1件)

id:munyaX No.1

munyaX回答回数120ベストアンサー獲得回数242009/01/26 15:26:37ここでベストアンサー

ポイント50pt

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

<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>
id:ha_te_na_com

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

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

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

2009/01/26 16:00:43
id:munyaX No.2

munyaX回答回数120ベストアンサー獲得回数242009/01/26 16:34:09

ポイント50pt

>「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';

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

id:ha_te_na_com

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

2009/01/26 16:39:13

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

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

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

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

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