背景画像とクリスマス用カウントダウンメッセージが、指定日によって変化します。
12/22以前、12/23、12/24、12/25、12/26以降の指定と、５種類に変化します。
※なお、カウントダウンメッセージに表記される日数の数字は、毎日変わります。
 12/22以前 |
 12/23分 |
 12/24分 |
 12/25分 |
 12/26以降 |
指定日ごとに それぞれの 背景画像に 変化します。 |
JavaScriptのソースの中に、基準にする指定日を記述します。
クリスマス以外にも、お正月でも、受験の日でも何でもかまいません。
JavaScript はその基準日から、今日までの日数を計算します。その計算して出した日数を「a」とします。
「a==0」とは基準日当日を意味し、「a>0」とは基準日までの日数がプラスなので、まだ基準日に至っていないことを意味し、「a<0」とは基準日までの日数がマイナスなので、基準日が経過したことを意味します。
その３通りによって、「基準日前」「当日」「基準日後」で、メッセージを変更したり画像を変更したりできる――というのが基本です。
さて、今回は５通りの表示があります。
「a==0」の当日以外に、「a==1」「a==2」を設定しました。
「a==1」は、基準日当日にまだ至っていない「プラス1」なので、「12/24のクリスマス・イブ」になり、「a==2」は「12/23」になります。
上記の設定をしたので、基準日までの日数がプラスで基準日に至っていない「a>0」を「a>2」に変更して下さい。
「12/23」の「a==2」を使用しないなら、「a>2」は「a>1」に変更となります。
このあたりは自分の好みで増減可能です。
変更するのは、下記の見本のソースの緑色部分です。
CSSに記述する背景画像ファイル名は、JavaScript が動作しない時に表示したい画像名を記述します。
そして変化する背景画像ファイル名は、直接 JavaScript のソースの最後の方に記述します。
赤字部分が見本の背景画像名です。ここを自分で使用する画像名に変更して下さい。
if(a<0){document.body.style.backgroundImage="url(sora1.jpg)";----省略---------;} //★指定日以降。12/26以降
else if(a==0){document.body.style.backgroundImage="url(fp23.jpg)";----省略----;} //★指定日当日。12/25
else if(a==1){document.body.style.backgroundImage="url(fp22.jpg)";----省略----;} //★指定日前日。12/24
else if(a==2){document.body.style.backgroundImage="url(fp21.jpg)";----省略----;} //★指定日２日前。12/23
else if(a>2){document.body.style.backgroundImage="url(gat112.jpg)";----省略----;}//★指定日以前。12/22以前
}
付記：記述が長くなるので省略した上記の「省略」部分は「クリスマス用カウントメッセージ」の部分です。
全行背景画像部分を削除して、この「省略」部分だけ記述すると、メッセージのみの表示になります。
参考として、カウントダウンの JavaScript を一部に使用した■合体１６■Sl+Ot+Mv■フェードのリアル時計+カウントダウン■もどうぞ。
原本のカウントダウンのJavaScriptを改造しました。原本はMake-Mobileから。
background-sizeプロパティについては、HTMLクイックリファレンスに詳しい説明があります。
いろいろな指定方法があります。