読者です 読者をやめる 読者になる 読者になる

ぽよメモ

ファッション情報学徒の備忘録.

ヘッダー画像の切り替え

このブログのヘッダー(PC版のみ)が気に入らなかったので変更したついでに、一日のうち何回か画像が切り替わるような実装をしました。
まず現在の時刻を取得します。

var d = new Date()
//時間(hours) 0~23
var hour = d.getHours();
//分(minutes) 0~59
var min = d.getMinutes();
//秒(seconds) 0~59
var sec = d.getSeconds();
//ミリ秒(milli seconds) 0~999
var ms = d.getMilliseconds();

こんな感じで現在時刻に関するパラメータを取得することが出来ます。
というのを用いて以下のようにスクリプトを組んでみました(なぜhourじゃなくてtimeなのかとか1~4の順番がバラバラだとか突っ込まないでください死んでしまいます)

$(function(){
var time = new Date().getHours();
i = 0;
if((time >= 5) && (time < 10)){ i = 4; }
else if((time >= 10) && (time < 15)){ i = 1; }
else if((time >= 15) && (time < 18)){ i = 2; }
else if((time >= 18) || (time < 5)){ i = 3; }
$('#header-column').css({'background-image':'url("/img/header_' + i + '.jpg"'});
});

適当に組んだのでもっと簡単に実装できるよって言うのが有れば教えて下さい…