時刻によって背景画像を変化させる

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

パソコンに内臓されているタイマーを利用すると、時刻を取得することができます。ここでは、JAVA Scriptを使って、ページを開いた時刻によって背景画像を変更する方法を考えてみましょう。

■　時刻で画像を切り替える処理の設定

ページの読み込みが完了した時のイベントを使って、背景の画像を切り替える関数の呼び出しを設定します。

<!--
var now = new Date();
nowhours = now.getHours()
if(nowhours<= 3 && nowhours<5){
document.body.background="../../assets/images/BCG_046.GIF";}
else if(nowhours<= 5 && nowhours<10){
document.body.background="../../assets/images/BCG_048.GIF";}
else if(nowhours<= 10 && nowhours<14){
document.body.background="../../assets/images/BCG_024.GIF";}
else if(nowhours<= 14 && nowhours<17){
document.body.background="../../assets/images/BCG_044.GIF";}
else if(nowhours<= 17 && nowhours<21){
document.body.background="../../assets/images/BCG_047.GIF";}
else if(nowhours<= 21 && nowhours<23){
document.body.background="../../assets/images/BCG_023.GIF";}
else if(nowhours<= 23){
document.body.background="../../assets/images/BCG_049.GIF";}
//-->
</SCRIPT>

例では、「Date()」関数を使って現在の日時を取得し、時刻によってページの背景画像を変更しています。
このスクリプトでは、「Date」関数で取得した日時からを「getHours()」関数を使って「〜時」の部分だけを取り出して時刻の判定に利用しているのがポイントです。

<<<戻る