JavaScriptのサンプル

1時間ごとにメッセージを変えるスクリプトです。

コード

<html>
<head>
<title>TAG index Webサイト</title>
</head>
<body>

<script type="text/javascript">
<!--

var msg = new Array();


// 設定開始（メッセージの内容を設定してください）

msg[0] = '<b>0時</b>のメッセージ';
msg[1] = '<b>1時</b>のメッセージ';
msg[2] = '<b>2時</b>のメッセージ';
msg[3] = '<b>3時</b>のメッセージ';
msg[4] = '<b>4時</b>のメッセージ';
msg[5] = '<b>5時</b>のメッセージ';
msg[6] = '<b>6時</b>のメッセージ';
msg[7] = '<b>7時</b>のメッセージ';
msg[8] = '<b>8時</b>のメッセージ';
msg[9] = '<b>9時</b>のメッセージ';
msg[10] = '<b>10時</b>のメッセージ';
msg[11] = '<b>11時</b>のメッセージ';
msg[12] = '<b>12時</b>のメッセージ';
msg[13] = '<b>13時</b>のメッセージ';
msg[14] = '<b>14時</b>のメッセージ';
msg[15] = '<b>15時</b>のメッセージ';
msg[16] = '<b>16時</b>のメッセージ';
msg[17] = '<b>17時</b>のメッセージ';
msg[18] = '<b>18時</b>のメッセージ';
msg[19] = '<b>19時</b>のメッセージ';
msg[20] = '<b>20時</b>のメッセージ';
msg[21] = '<b>21時</b>のメッセージ';
msg[22] = '<b>22時</b>のメッセージ';
msg[23] = '<b>23時</b>のメッセージ';

// 設定終了


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">';

// 設定終了
表示例