JavaScript 、 CSS 、 HTML で作る、時間別メッセージ。
現在の時刻に応じたメッセージを表示させることができる。例えば、12時台に、「お昼ですね」と表示させたり、8時台に、「おはようございます」と表示させたりできる。
実装例
実装例の動作について
現在時刻が、10時台であれば、「10時台のメッセージ」を表示する。15時台であれば、「15時台のメッセージ」を表示する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
var message = new Array(
'0時台のメッセージ',
'1時台のメッセージ',
'2時台のメッセージ',
'3時台のメッセージ',
'4時台のメッセージ',
'5時台のメッセージ',
'6時台のメッセージ',
'7時台のメッセージ',
'8時台のメッセージ',
'9時台のメッセージ',
'10時台のメッセージ',
'11時台のメッセージ',
'12時台のメッセージ',
'13時台のメッセージ',
'14時台のメッセージ',
'15時台のメッセージ',
'16時台のメッセージ',
'17時台のメッセージ',
'18時台のメッセージ',
'19時台のメッセージ',
'20時台のメッセージ',
'21時台のメッセージ',
'22時台のメッセージ',
'23時台のメッセージ'
);
var now = new Date();
var hour = now . getHours();
function hourlyMessage() {
document . getElementById( 'hourly-message' ) . innerHTML = message[hour];
}
window . onload = hourlyMessage;
// -->
</script>
<!--
var message = new Array(
'0時台のメッセージ',
'1時台のメッセージ',
'2時台のメッセージ',
'3時台のメッセージ',
'4時台のメッセージ',
'5時台のメッセージ',
'6時台のメッセージ',
'7時台のメッセージ',
'8時台のメッセージ',
'9時台のメッセージ',
'10時台のメッセージ',
'11時台のメッセージ',
'12時台のメッセージ',
'13時台のメッセージ',
'14時台のメッセージ',
'15時台のメッセージ',
'16時台のメッセージ',
'17時台のメッセージ',
'18時台のメッセージ',
'19時台のメッセージ',
'20時台のメッセージ',
'21時台のメッセージ',
'22時台のメッセージ',
'23時台のメッセージ'
);
var now = new Date();
var hour = now . getHours();
function hourlyMessage() {
document . getElementById( 'hourly-message' ) . innerHTML = message[hour];
}
window . onload = hourlyMessage;
// -->
</script>
CSS
<style type="text/css">
<!--
div#hourly-message {
font-weight: bold;
font-size: 25px;
color: white;
background: gray url(earth.png) no-repeat center top;
text-align: center;
width: 500px;
padding: 40px 0 15px 0;
border: 2px #000000 solid;
}
-->
</style>
<!--
div#hourly-message {
font-weight: bold;
font-size: 25px;
color: white;
background: gray url(earth.png) no-repeat center top;
text-align: center;
width: 500px;
padding: 40px 0 15px 0;
border: 2px #000000 solid;
}
-->
</style>
HTML
<div id="hourly-message"> </div>
解説
JavaScript
<script type="text/javascript">
<!--
var message = new Array( // 時間別メッセージを配列に格納
'0時台のメッセージ', // 0時台に表示するメッセージ
'1時台のメッセージ', // 1時台に表示するメッセージ
'2時台のメッセージ', // 2時台に表示するメッセージ
'3時台のメッセージ', // 3時台に表示するメッセージ
'4時台のメッセージ', // 4時台に表示するメッセージ
'5時台のメッセージ', // 5時台に表示するメッセージ
'6時台のメッセージ', // 6時台に表示するメッセージ
'7時台のメッセージ', // 7時台に表示するメッセージ
'8時台のメッセージ', // 8時台に表示するメッセージ
'9時台のメッセージ', // 9時台に表示するメッセージ
'10時台のメッセージ', // 10時台に表示するメッセージ
'11時台のメッセージ', // 11時台に表示するメッセージ
'12時台のメッセージ', // 12時台に表示するメッセージ
'13時台のメッセージ', // 13時台に表示するメッセージ
'14時台のメッセージ', // 14時台に表示するメッセージ
'15時台のメッセージ', // 15時台に表示するメッセージ
'16時台のメッセージ', // 16時台に表示するメッセージ
'17時台のメッセージ', // 17時台に表示するメッセージ
'18時台のメッセージ', // 18時台に表示するメッセージ
'19時台のメッセージ', // 19時台に表示するメッセージ
'20時台のメッセージ', // 20時台に表示するメッセージ
'21時台のメッセージ', // 21時台に表示するメッセージ
'22時台のメッセージ', // 22時台に表示するメッセージ
'23時台のメッセージ' // 23時台に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var hour = now . getHours(); // 現在の時間を、変数hourに代入
function hourlyMessage() {
document . getElementById( 'hourly-message' ) . innerHTML = message[hour]; // ID が hourly-message の要素内に時間別メッセージを表示
}
window . onload = hourlyMessage; // ページを表示した直後に、hourlyMessage() を呼び出す
// -->
</script>
<!--
var message = new Array( // 時間別メッセージを配列に格納
'0時台のメッセージ', // 0時台に表示するメッセージ
'1時台のメッセージ', // 1時台に表示するメッセージ
'2時台のメッセージ', // 2時台に表示するメッセージ
'3時台のメッセージ', // 3時台に表示するメッセージ
'4時台のメッセージ', // 4時台に表示するメッセージ
'5時台のメッセージ', // 5時台に表示するメッセージ
'6時台のメッセージ', // 6時台に表示するメッセージ
'7時台のメッセージ', // 7時台に表示するメッセージ
'8時台のメッセージ', // 8時台に表示するメッセージ
'9時台のメッセージ', // 9時台に表示するメッセージ
'10時台のメッセージ', // 10時台に表示するメッセージ
'11時台のメッセージ', // 11時台に表示するメッセージ
'12時台のメッセージ', // 12時台に表示するメッセージ
'13時台のメッセージ', // 13時台に表示するメッセージ
'14時台のメッセージ', // 14時台に表示するメッセージ
'15時台のメッセージ', // 15時台に表示するメッセージ
'16時台のメッセージ', // 16時台に表示するメッセージ
'17時台のメッセージ', // 17時台に表示するメッセージ
'18時台のメッセージ', // 18時台に表示するメッセージ
'19時台のメッセージ', // 19時台に表示するメッセージ
'20時台のメッセージ', // 20時台に表示するメッセージ
'21時台のメッセージ', // 21時台に表示するメッセージ
'22時台のメッセージ', // 22時台に表示するメッセージ
'23時台のメッセージ' // 23時台に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var hour = now . getHours(); // 現在の時間を、変数hourに代入
function hourlyMessage() {
document . getElementById( 'hourly-message' ) . innerHTML = message[hour]; // ID が hourly-message の要素内に時間別メッセージを表示
}
window . onload = hourlyMessage; // ページを表示した直後に、hourlyMessage() を呼び出す
// -->
</script>
CSS
<style type="text/css">
<!--
div#hourly-message { /* IDが、hourly-message の div 要素 */
font-weight: bold; /* 文字の太さ */
font-size: 25px; /* 文字の大きさ*/
color: white; /* 文字の色 */
background: gray url( /* 背景に使う画像のURLを指定 */ ) no-repeat center top; /* 背景の色、背景の画像、背景の画像の並べ方、背景の画像の表示位置 */
text-align: center; /* テキストの水平方向の表示位置*/
width: 500px; /* 幅 */
padding: 40px 0 15px 0; /* 内側の余白: 上 右 下 左 */
border: 2px #000000 solid; /* 枠線の太さ・色・スタイル */
}
-->
</style>
<!--
div#hourly-message { /* IDが、hourly-message の div 要素 */
font-weight: bold; /* 文字の太さ */
font-size: 25px; /* 文字の大きさ*/
color: white; /* 文字の色 */
background: gray url( /* 背景に使う画像のURLを指定 */ ) no-repeat center top; /* 背景の色、背景の画像、背景の画像の並べ方、背景の画像の表示位置 */
text-align: center; /* テキストの水平方向の表示位置*/
width: 500px; /* 幅 */
padding: 40px 0 15px 0; /* 内側の余白: 上 右 下 左 */
border: 2px #000000 solid; /* 枠線の太さ・色・スタイル */
}
-->
</style>
HTML
<div id="hourly-message"> </div>
この部分を、JavaScript でコントロールし、時間別メッセージを表示させる。