1時間ごとにメッセージを変えるスクリプトです。
<html> <head> <title>HTML index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- var msg = new Array(); // 設定開始(メッセージの内容を設定してください) msg[0] = '<strong>0時</strong>のメッセージ'; msg[1] = '<strong>1時</strong>のメッセージ'; msg[2] = '<strong>2時</strong>のメッセージ'; msg[3] = '<strong>3時</strong>のメッセージ'; msg[4] = '<strong>4時</strong>のメッセージ'; msg[5] = '<strong>5時</strong>のメッセージ'; msg[6] = '<strong>6時</strong>のメッセージ'; msg[7] = '<strong>7時</strong>のメッセージ'; msg[8] = '<strong>8時</strong>のメッセージ'; msg[9] = '<strong>9時</strong>のメッセージ'; msg[10] = '<strong>10時</strong>のメッセージ'; msg[11] = '<strong>11時</strong>のメッセージ'; msg[12] = '<strong>12時</strong>のメッセージ'; msg[13] = '<strong>13時</strong>のメッセージ'; msg[14] = '<strong>14時</strong>のメッセージ'; msg[15] = '<strong>15時</strong>のメッセージ'; msg[16] = '<strong>16時</strong>のメッセージ'; msg[17] = '<strong>17時</strong>のメッセージ'; msg[18] = '<strong>18時</strong>のメッセージ'; msg[19] = '<strong>19時</strong>のメッセージ'; msg[20] = '<strong>20時</strong>のメッセージ'; msg[21] = '<strong>21時</strong>のメッセージ'; msg[22] = '<strong>22時</strong>のメッセージ'; msg[23] = '<strong>23時</strong>のメッセージ'; // 設定終了 var now = new Date(); var hour = now.getHours(); // 表示開始 document.write(msg[hour]); // 表示終了 // --> </script> </body> </html>
表示したい場所にスクリプトを記述します。
// 設定開始 〜 // 設定終了 の部分で、メッセージの内容を設定してください。
// 表示開始 〜 // 表示終了 の部分を変更すると、メッセージの前後に文字を入れられます。また、// 設定開始 〜 // 設定終了 の部分でメッセージの代わりにイメージタグを記述すると、時間別に画像を表示することができます。
それぞれ以下のサンプルを参考にしてください。
青い文字の部分は、必要に応じて書き換えてください。
■メッセージの前後に文字を入れる
// 表示開始 document.write('これは 「' + msg[hour] + '」 です。'); // 表示終了
■時間別に画像を表示
// 設定開始 msg[0] = '<img src="image/0.gif" alt="0時" width="160" height="50">'; msg[1] = '<img src="image/1.gif" alt="1時" width="160" height="50">'; msg[2] = '<img src="image/2.gif" alt="2時" width="160" height="50">'; ・ ・ 中略 ・ ・ msg[21] = '<img src="image/21.gif" alt="21時" width="160" height="50">'; msg[22] = '<img src="image/22.gif" alt="22時" width="160" height="50">'; msg[23] = '<img src="image/23.gif" alt="23時" width="160" height="50">'; // 設定終了