Javascriptでリンク画像を１時間ごとにランダム表示

Javascriptで、以下のような条件のプログラムが必要です。

1.jpg～8.jpgまで８枚の画像があります。
８枚の画像は、それぞれ決まった別のページにリンクしています。

1.jpg →1.html
2.jpg →2.html
・
・
8.jpg→8.html

８枚の画像を４つのグループに分ける。
グループ１　1.jpg , 2.jpg
グループ２　3.jpg , 4.jpg
グループ３　5.jpg , 6.jpg
グループ４　7.jpg , 8.jpg

グループ１から４までを１時間ごとに切り替える。
１～４時まで→グループ１をランダム表示
５～１２時まで→グループ２をランダム表示
１３～１８時まで→グループ３をランダム表示
１９～０時まで→グループ４をランダム表示

１時間ごとにランダム表示ならなんとかできたのですが、
画像リンクがそれぞれ別であることをすっかり忘れていて、
行き詰まっています。

新しい別の方法を知りたいので、すみませんが
うまくいかなかったソースは掲載していません。

お分かりになる方がおられましたら、
プログラムをお教えいただけないでしょうか？

よろしくお願いします。

No.1 回答者： babu_baboo 回答日時： 2010/01/18 17:54

＞新しい別の方法

と、あるので、どう答えてよいのか困ります。でっ、マジ短く。

<p><a href="1.html" id="a"><img src="1.jpg" id="b" alt="*"></a></p>
<script type="text/javascript">
j=+'711113333333355555577777'.charAt((new Date).getHours())+Math.random()*2|0
with(document)getElementById('a').href=j+'html',getElementById('b').src='./img/'+j+'.gif'
</script>

No.2 回答者： fujillin 回答日時： 2010/01/18 19:05

＞１時間ごとにランダム表示ならなんとかできたのですが、

そこまでできていれば、対象とするデータを時間によって入れ替えてあげるだけですむでしょう。

配列に、
var data = [
{ time:[1, 4], image:['1.jpg, 1.html', '2.jpg, 2.html'] },
　・・・・
];
みたいに定義しておくとか。
（扱いやすい形であればなんでもよい）

指定の1～8がそのままで良いのなら、定義しておかなくても、画像名やリンク先を index + '.jpg' とか index + '.html' みたいにして求めることも可能です。


＞新しい別の方法を知りたいので、
現在の方法が不明なので、同じなのか別なのか判別できません。
すぐに思いつくのは。

◇時間の判別方法
1）↑の例示のように、開始・終了の両方を抑えその間であることを判定
2）連続しているなら、両方でなくても、開始だけ比較すればよい
3）6時間毎に割り振るなら、時刻を6で割って求める

◇時間ごとのセット
1）setTimeoutやIntervalで定期的に時間をチェックする。
2）最初に時間をチェックして、次の時間の変わり目までを計算し、
　それに合わせて間隔をセットし、時間を確認するようにする。
　（誤差を吸収する仕組みが必要）
3）多少の時間誤差が合っても良いのなら、2）で最初にセットしたら、あとは
　無条件に6時間毎に画像を変えるルーチンを動かす。（Dateは確認しない）

◇データの持ち方
1）↑の例示のようにセットにして定義しておく。
2）内容ごとに変数を変えて配列で定義。
3）ご提示のように機械的に計算可能な時刻、文字列である場合は
　データ定義などせず、計算値で求めてしまう。

ぐらいかな。組み合わせ方で3^3になるので27通り？（…と言えるのか？）


と思ったら、あれっ？
＞グループ１から４までを１時間ごとに切り替える
1～4のグループは時間指定があるから、切り替わらないでしょう。
同じグループ内で、画像を選択し直すのなら意味はわかるけれど、1グループに画像が2個しかないみたいなので、切り替えると言っても…
（同じものの連続を許すか許さないかで大きく変わる）

なので、↑の「6時間ごと」は1時間毎ということになるのかな？