時間別にメッセージを入れ替えて表示する

一時間毎に表示を入れ替えるサンプルです。

<div style="background:#FFFFFF; border:2px dotted #00CC33; padding:4px;">

    <script type="text/javascript">

//<![CDATA[

    <!--

 

    var msg = new Array();

 

 

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

 

    msg[0] = '<span style="color:#9933FF"><strong>　0時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[1] = '<span style="color:#9933FF"><strong>　1時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[2] = '<span style="color:#9933FF"><strong>　2時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[3] = '<span style="color:#9933FF"><strong>　3時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[4] = '<span style="color:#9933FF"><strong>　4時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[5] = '<span style="color:#CC3300"><strong>　5時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[6] = '<span style="color:#CC3300"><strong>　6時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[7] = '<span style="color:#CC3300"><strong>　7時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[8] = '<span style="color:#CC3300"><strong>　8時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[9] = '<span style="color:#CC3300"><strong>　9時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[10] = '<span style="color:#99FF66"><strong>　10時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[11] = '<span style="color:#99FF66"><strong>　11時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[12] = '<span style="color:#99FF66"><strong>　12時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[13] = '<span style="color:#99FF66"><strong>　13時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[14] = '<span style="color:#99FF66"><strong>　14時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[15] = '<span style="color:#3399CC"><strong>　15時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[16] = '<span style="color:#3399CC"><strong>　16時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[17] = '<span style="color:#3399CC"><strong>　17時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[18] = '<span style="color:#3399CC"><strong>　18時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[19] = '<span style="color:#3399CC"><strong>　19時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[20] = '<span style="color:#FF33CC"><strong>　20時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[21] = '<span style="color:#FF33CC"><strong>　21時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[22] = '<span style="color:#FF33CC"><strong>　22時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

    msg[23] = '<span style="color:#FF33CC"><strong>　23時<\/strong><\/span><span style="color:#0066FF"> を過ぎました<\/span>';

 

    // 設定終了

 

 

    var now = new Date();

 

    var hour = now.getHours();

 

    // 表示開始

    document.write(msg[hour]);

    // 表示終了

 

    // -->

    //]]>

    </script>

</div>