JSにて時間帯によって画像を切り替えたい+αで

24時間中、○時~○時30分までは a.jpg、
○時30分~(○+1)時は b.jpg、
(○+1)時~(○+1)時30分 は a.jpg、 (○+1)時30分~(○+2時は b.jpg …
と、要するに0~30分まではa.jpg、30~60分はb.jpg
といったように繰り返すことで、閲覧者を2分の1にふるいたいと思うのですが、
条件を分岐してダラっと24時間分書く以外に、ギュッとスマートにすることは出来ますでしょうか?
時間の区切りは30分毎でなくても、1分・10分でもいいです。
大多数の閲覧者に対して大まかに2グループ分けたい考えからの発想ですが、
スマートであれば他の方法でも構いません、

皆様、どうぞ宜しくお願い致します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/05 20:44:29
  • 終了:2011/11/06 01:20:05

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/11/05 21:33:10

ポイント200pt

じゃあ0.jpg, 1.jpg以外のファイル名にする方法
demo: http://jsfiddle.net/f3urC/

<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
	var srcs = ['http://www.hatena.ne.jp/images/badge-q-used-hover.gif', 'http://www.hatena.ne.jp/images/badge-b-used-hover.gif'];
	var now = new Date();
	var imgSrc = srcs[Math.floor(now.getMinutes()/30)];
	document.getElementById('logo').src = imgSrc;
};
</script>
</head>
<body>
<img id="logo" src="">
</body>
</html>


このあたりの本を読んで勉強するといいですよ。ブラウザはFirefox、アドオンのFirebugがおすすめ。

id:Cherenkov

追記しました

2011/11/06 00:56:27
id:mikomeko

ご丁寧にjsfiddleまでありがとうございます。

そのまま試せました!

ここの皆様がお優しいのと、

本職でないのでなかなか勉強できないところですが、せっかくなので一冊購入してみようかと思います。(が結構なお値段なんですね。。。)

2011/11/06 01:12:42

その他の回答(2件)

id:munyaX No.1

munyaX回答回数120ベストアンサー獲得回数242011/11/05 20:54:46

ポイント50pt

動作確認してないですが、以下のような感じでどうでしょうか?

image/0.jpg, image/1.jpg を用意する感じです。

var now = new Date();
var img = 'image/' + Math.floor( now.getMinutes()/30 ) + '.jpg';
id:mikomeko

今度から素人って入れますね。

動作確認していないとおっしゃっていたのと汎用性に欠けていたので他の方よりポイント低くしてしまいましたが、

50ptってぼやかれるほど低いポイントなのでしたら謝りますね。。

2011/11/06 03:09:15
id:munyaX

どうでも良いのですが、

一般的なプログラマーの場合、このような設問の場合は動作確認の有無はあまり意味がないんですよね。

「現在分を30で割れば2通りの結果が得られる」というロジックに気がつくかどうかというのが一番大切で、それさえ分かってしまえば実現する方法はリファレンスでも眺めれば簡単に書ける部分なのです。

汎用的、というのが配列のインデックスにするという意図であれば、職業プログラマであれば気がついて当たり前の部分なので…。


趣味で書かれているのであれば、難しいのかもしれないですね。

2011/11/06 08:03:31
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/11/05 21:33:10ここでベストアンサー

ポイント200pt

じゃあ0.jpg, 1.jpg以外のファイル名にする方法
demo: http://jsfiddle.net/f3urC/

<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
	var srcs = ['http://www.hatena.ne.jp/images/badge-q-used-hover.gif', 'http://www.hatena.ne.jp/images/badge-b-used-hover.gif'];
	var now = new Date();
	var imgSrc = srcs[Math.floor(now.getMinutes()/30)];
	document.getElementById('logo').src = imgSrc;
};
</script>
</head>
<body>
<img id="logo" src="">
</body>
</html>


このあたりの本を読んで勉強するといいですよ。ブラウザはFirefox、アドオンのFirebugがおすすめ。

id:Cherenkov

追記しました

2011/11/06 00:56:27
id:mikomeko

ご丁寧にjsfiddleまでありがとうございます。

そのまま試せました!

ここの皆様がお優しいのと、

本職でないのでなかなか勉強できないところですが、せっかくなので一冊購入してみようかと思います。(が結構なお値段なんですね。。。)

2011/11/06 01:12:42
id:tdoi No.3

tdoi回答回数174ベストアンサー獲得回数752011/11/05 21:38:35

ポイント200pt

大まかに分けたいだけなら、これで十分ではないかと思います。

<script language="JavaScript">
var images = new Array();
images[0] = 'a.jpg';
images[1] = 'b.jpg';
var num = Math.floor(Math.random() * images.length);
document.write('<img src="' + images[num] + '"/>');
</script>
id:mikomeko

素人質問申し訳ないのですが、”Math.random”というのは

本当に乱数なのでしょうか?

つまりは個人のアクセスに対してランダムであり、大多数を対象としたときに規則性はないのか。

結果で大きく2グループに分けれるのか不安があるのですが…

2011/11/05 22:39:01
id:tdoi

乱数生成の実装次第である程度の規則性はあるでしょうが、Math.randomは乱数です。

規則性はあるでしょうが、アクセスが多かった場合に大雑把に2分したいのであれば、これで十分かと思ってます。

シード次第ですが、

http://d.hatena.ne.jp/kogecoo/20110131/1296492140

なんかの記事とかから推測すると、シードもかぶりにくいかなと。

もちろん、絶対に片方に偏らない保証はないですが、それは、アクセスの時刻であっても同じかと思っています。

2011/11/05 23:47:14
  • id:munyaX
    Oh…。
    ほぼ正解のロジック書いたのに、分からなかったのか(;´Д`)

    自分のレベルを書いてもらえれば、最初から答えようもあるんだけどなー。

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

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

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

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