時刻によって表示する画像を切り替える

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

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

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

パソコンの時計から取得した時刻によって、画像を切り替える処理を設定します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var now = new Date();
nowhours = now.getHours();
if(nowhours<= 3 && nowhours<5) {
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall01.jpg'></DIV>" );}
else if(nowhours<= 5 && nowhours<10){
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall02.jpg'></DIV>" );}
else if(nowhours<= 10 && nowhours<14){
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall03.jpg'></DIV>" );}
else if(nowhours<= 14 && nowhours<17){
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall04.jpg'></DIV>" );}
else if(nowhours<= 17 && nowhours<21){
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall05.jpg'></DIV>" );}
else if(nowhours<= 21 && nowhours<23){
document.write( "<DIV STYLE='text-align:center;position:relative;top:20'><IMG src='../../assets/images/wall06.jpg'></DIV>" );}
else if(nowhours<= 23){
document.write( "<DIV STYLE='text-align:center;position:relative;top:top:20'><IMG src='../../assets/images/wall07.jpg'></DIV>" );}
//-->
</SCRIPT>

例では、時刻によって実行するタグを切り替えることで、それぞれの時刻によって異なる画像を表示しています。
このスクリプトでは、「write」メソッドを「document.write("HTMLのタグ")」の形式で記述し、JAVA ScriptからHTMLのタグを実行するのがポイントです。JAVA Scriptでは、条件によって処理を変更できるため、時刻によって<IMG SRC="wall01.jpg">のように画像を切り替えることができます。

<<<戻る