Javascriptで季節に応じて自動的にデザインを変える方法

2016年3月9日

季節（四季）に応じて自動的に背景画像を変えたり、イラストを変えたりしたいという要望を受けたことありませんか？そんな時にコピペで使えるjavascriptをご紹介します。

季節の日付を考え、設定する。

まずは何日〜何日が春か夏か秋か冬かを考えます。今回の例では、以下のように設定します。

春：3月1日〜5月31日

夏：6月1日〜8月31日

秋：9月1日〜10月30日

冬：11月1日〜2月28日

もちろんこれは任意なので、好きな日にちを指定してください。

日付の設定の書き方　javascript

日付が決まったら、以下の例に添って日付を書き換えてください。

※ここで注意点ですが、冬だけは年をまたぐ部分の処理があるので、12月31日までと1月1日からは、例にならって分けて記述します。

//季節の日付設定 =============================================
var m = new Date(); //今日の日時を取得
var this_year = m.getFullYear(); //今年の年号（西暦）を取得
var n;
var x;


     //春===============
        n = Date.parse(this_year + "/" + "3/1");
　　　　　//3月1日のミリ秒を取得
        x = (m - n) / 1000 / 60 / 60 / 24;
　　　　　//今日のミリ秒から3月1日のミリ秒を引いてミリ秒を１日単位に変換
　　　　　//xが0より大きければ過去の日付、0より小さければ未来の日付
        var spr1 = Math.floor(x); 
　　　　　//xを整数化して変数に代入

        n = Date.parse(this_year + "/" + "5/31");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var spr2 = Math.floor(x);

     //夏===============
        n = Date.parse(this_year + "/" + "6/1");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var sum1 = Math.floor(x);

        n = Date.parse(this_year + "/" + "8/31");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var sum2 = Math.floor(x);

     //秋===============
        n = Date.parse(this_year + "/" + "9/1");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var aut1 = Math.floor(x);

        n = Date.parse(this_year + "/" + "10/30");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var aut2 = Math.floor(x);

     //冬===============
        n = Date.parse(this_year + "/" + "11/1");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var win1 = Math.floor(x);

        n = Date.parse(this_year + "/" + "12/31");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var win2 = Math.floor(x);

     //冬===============（年またぎ）
        n = Date.parse(this_year + "/" + "1/1");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var win3 = Math.floor(x);

        n = Date.parse(this_year + "/" + "2/28");
        x = (m - n) / 1000 / 60 / 60 / 24;
        var win4 = Math.floor(x);

季節ごとの処理

あとは、条件分岐を使ってbodyにクラスをつけたりして自由にデザインを変えてください。

if ((spr1 >= 0) && (spr2 <= 0)){

    //春に表示したい内容
    $('body').attr("class","spr");
  } else if ((sum1 >= 0) && (sum2 <= 0)){

    //夏に表示したい内容
    $('body').attr("class","sum");
  } else if ((aut1 >= 0) && (aut2 <= 0)){

    //秋に表示したい内容
    $('body').attr("class","aut");
  } else if ((win1 >= 0) && (win2 <= 0)){

    //冬に表示したい内容
    $('body').attr("class","win");
  } else if ((win3 >= 0) && (win4 <= 0)){

    //冬に表示したい内容
    $('body').attr("class","win");
}

簡単ですね、これで１年を通して季節毎に変わるサイトが簡単に作成できます。

もちろん応用すれば、毎月変わるデザインなんかも出来ますよね。