時間帯別にメッセージを表示するスクリプトです。
<html> <head> <title>HTML index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- // 設定開始(メッセージの内容を設定してください) var msg1 = '<strong>5:00 〜 8:59</strong> … おはようございます!'; // 時間帯1 var msg2 = '<strong>9:00 〜 11:59</strong> … 午前中はやる気出ないです。。'; // 時間帯2 var msg3 = '<strong>12:00 〜 13:59</strong> … お昼はもう食べた?'; // 時間帯3 var msg4 = '<strong>14:00 〜 17:59</strong> … とりあえず午後も頑張りますか'; // 時間帯4 var msg5 = '<strong>18:00 〜 23:59</strong> … 風呂入ったかー?'; // 時間帯5 var msg6 = '<strong>0:00 〜 4:59</strong> … まだ起きてるの?'; // 時間帯6 // 設定終了 var now = new Date(); var hour = now.getHours(); // 表示開始 // 時間帯1 if(hour >= 5 && hour <= 8){ document.write(msg1); } // 時間帯2 else if(hour >= 9 && hour <= 11){ document.write(msg2); } // 時間帯3 else if(hour >= 12 && hour <= 13){ document.write(msg3); } // 時間帯4 else if(hour >= 14 && hour <= 17){ document.write(msg4); } // 時間帯5 else if(hour >= 18 && hour <= 23){ document.write(msg5); } // 時間帯6 else{ document.write(msg6); } // 表示終了 // --> </script> </body> </html>
表示したい場所にスクリプトを記述します。
// 設定開始 〜 // 設定終了 の部分で、メッセージの内容を設定してください。
このスクリプトは、1日を6つの時間帯で分けています。時間帯の範囲を変更したい場合は、// 表示開始 〜 // 表示終了 の部分で青い数字を書き換えてください。(// 時間帯6 は、// 時間帯1 〜 // 時間帯5 以外の範囲になります。)
// 設定開始 〜 // 設定終了 の部分でメッセージの代わりにイメージタグを記述すると、時間帯別に画像を表示することができます。以下のサンプルを参考にしてください。
青い文字の部分は、必要に応じて書き換えてください。
■時間帯別に画像を表示
// 設定開始 var msg1 = '<img src="image/t1.gif" alt="朝" width="160" height="50">'; // 時間帯1 var msg2 = '<img src="image/t2.gif" alt="午前" width="160" height="50">'; // 時間帯2 var msg3 = '<img src="image/t3.gif" alt="昼" width="160" height="50">'; // 時間帯3 var msg4 = '<img src="image/t4.gif" alt="午後" width="160" height="50">'; // 時間帯4 var msg5 = '<img src="image/t5.gif" alt="夜" width="160" height="50">'; // 時間帯5 var msg6 = '<img src="image/t6.gif" alt="深夜" width="160" height="50">'; // 時間帯6 // 設定終了