24時間毎に外部cssの変更は可能ですか？

質問

Webサイトのテーマカラーを6色決めて、それぞれのカラーを24時間ごとに変えたいと思っています。

例えば今日は赤で、明日は青、のように変えていきたいのですが、
単純に背景色を変えるのではイメージが大きく変わってしまい、デザイン的におかしくなります。

いっそのこと思い切って、アイコンや画像もそれぞれのテーマカラー別に用意してしまおうと考えています。

そうなるとよくあるタイプの単純な画像・背景色の切替ではなく、テーマカラー別に6つのcssを用意して、24時間毎に切替るのが手っ取り早くて良いと考えています。

javascriptで例えば0～7時までは背景色や画像を入れ替える、
外部cssを入れ替える、というのは過去ログからもわかったのですが、
24時間毎に入れ替えるというのは可能なのでしょうか？

javascriptの知識はまったくないため、大変申し訳ないのですが教えて頂けると大変助かります。

よろしくお願いいたします。

回答No.3

tracer · ベストアンサー

そうですか、6にこだわる必要があったのですか。
ご自身の能力に併せて、可能な方を変更したほうが現実かと思いました。
つまり、7(曜日)で実装できるなら、cssを7つにすればいいのではないかと。
一応6つのバージョンも書いておきますね。

//cssのディレクトリパス
var css_dir = "/css/";

//cssの数
var css_lot = 6;

//経過日数
var start_day = "2013/5/22";
var start_date = new Date(start_day);
var now_date = new Date();
var pass_days = Math.floor((now_date.getTime()-start_date.getTime())/(24*60*60*1000));

//経過日数とcssの数で割った余り
var css_name = pass_days % css_lot;

//cssへのフルパス
var css_path = css_dir + css_name + ".css";

スタイルシートは、0.cssから5.cssを用意し、あとは、stylesheetのhref属性にcss_pathを指定すればよいかと。

お礼

3日悩みましたが何とかサンプルが動作いたしました。

教えて頂いたコードの最後の行に
document.write("<link href=",css_path," rel='stylesheet' type='text/css' />");

で動作致しました。

どうもありがとうございました。

補足

お返事が遅れてしまい、申し訳ございません。

とりあえず自分が理解できるためのサンプルを作成しておりました。

＞stylesheetのhref属性にcss_pathを指定
というのは、

<link href="css_path" rel="stylesheet" type="text/css" />

ということでよろしいのでしょうか？

おんぶだっこで申し訳ございません。

回答No.2

tracer

まず、前提として、javascriptが実行されるのは、ブラウザがページにアクセスしたタイミングです。従って、仮に、24時間同じページを開いていたとしても、自動でcssが変更されることはありません。もちろん、自動で変更させる仕組みを作ることは可能ですが、cssの変更程度の内容に、24時間経過しているかどうかを毎秒、毎分の単位でチェックする処理を走らせるのは現実的ではないですね。

ということで、「アクセスした曜日でcssを切り替える」という方法なら、比較的簡単に実装できると思います。
まず、曜日を取得して、日曜日ならsun.cssという感じですね。
曜日の取得も、外部stylesheetのパスの変更方法も、ググればすぐに出ます。

ただ、注意したいのは、javascriptは、クライアント(ブラウザ)が実行するプログラムなので、各ユーザーのPC時計が狂っていると正常に機能しません。一律に処理する必要があるならば、javascriptではなく、サーバーサイドのプログラムを使うことになると思います。

補足

前提から細かく教えて頂いてありがとうございます。

ただ、今回の狙いが「24時間毎の方が毎日変わっている感がある…」というもののため、あえて曜日毎の変更をせずに、24時間毎にしています。

PC時計に関しては仕方のないことと割り切ります。

回答No.1

pa_cotta

んー、日付を６で割った余りの値を参照して切り替えるのがてっとり早いでしょうか。

<script>
// 現在日の取得
var now_date = new Date();
var day = now_date.getDate();
var css_pattern;

// 日付を6で割った余りを求める
css_pattern = day % 6;

switch(css_pattern) {
case 0:
// 読み込むCSSとかの設定
break;
// 以下case 5まで続く
}
</script>

CSSの設定するところとかは設定したい内容を記載して下さい。

>javascriptの知識はまったくないため、大変申し訳ないのですが教えて頂けると大変助かります。

これを機に覚えましょう。覚えずにいつまでも丸投げは恥ずかしいものです。

お礼

早速のお返事ありがとうございます。

>これを機に覚えましょう。覚えずにいつまでも丸投げは恥ずかしいものです。
仰る通りです。自分の実力不足を痛感しております。

ですが、恥かきついでに教えて下さい。
// 読み込むCSSとかの設定
// 以下case 5まで続く

というのは、具体的に外部cssの置き場所、という意味でしょうか？

ずうずうしいお願いで申し訳ありません。