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

Question

ha_te_na_com

14

14もっと見る

100pt

インターネットウェブ制作

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

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

回答の条件

1人2回まで

登録：2009/01/26 15:07:10
終了：2009/01/26 16:39:24

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.2

munyaX120242009/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';

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

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

2009/01/26 16:39:13

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

munyaX · Accepted Answer · 2009-01-26T15:26:37+09:00

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

<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>

munyaX · Accepted Answer · 2009-01-26T15:26:37+09:00

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

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

ベストアンサー

munyaX120242009/01/26 15:26:37

その他の回答（1件）

munyaX120242009/01/26 15:26:37ここでベストアンサー

munyaX120242009/01/26 16:34:09

コメント（0件)

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