JavaScript 、 CSS 、 HTML で作る、月別メッセージ。
月に応じたメッセージを表示させることができる。例えば、12月に、「今年もあとわずかですね」と表示させたり、1月に、「あけましておめでとう」と表示させたりできる。
実装例
実装例の動作について
1月であれば、「1月のメッセージ」を表示する。2月であれば、「2月のメッセージ」を表示する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
var message = new Array(
'1月のメッセージ',
'2月のメッセージ',
'3月のメッセージ',
'4月のメッセージ',
'5月のメッセージ',
'6月のメッセージ',
'7月のメッセージ',
'8月のメッセージ',
'9月のメッセージ',
'10月のメッセージ',
'11月のメッセージ',
'12月のメッセージ'
);
var now = new Date();
var month = now . getMonth();
function monthlyMessage() {
document . getElementById( 'monthly-message' ) . innerHTML = message[month];
}
window . onload = monthlyMessage;
// -->
</script>
<!--
var message = new Array(
'1月のメッセージ',
'2月のメッセージ',
'3月のメッセージ',
'4月のメッセージ',
'5月のメッセージ',
'6月のメッセージ',
'7月のメッセージ',
'8月のメッセージ',
'9月のメッセージ',
'10月のメッセージ',
'11月のメッセージ',
'12月のメッセージ'
);
var now = new Date();
var month = now . getMonth();
function monthlyMessage() {
document . getElementById( 'monthly-message' ) . innerHTML = message[month];
}
window . onload = monthlyMessage;
// -->
</script>
CSS
<style type="text/css">
<!--
div#monthly-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#monthly-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="monthly-message"> </div>
解説
JavaScript
<script type="text/javascript">
<!--
var message = new Array( // 月別メッセージを配列に格納
'1月のメッセージ', // 1月に表示するメッセージ
'2月のメッセージ', // 2月に表示するメッセージ
'3月のメッセージ', // 3月に表示するメッセージ
'4月のメッセージ', // 4月に表示するメッセージ
'5月のメッセージ', // 5月に表示するメッセージ
'6月のメッセージ', // 6月に表示するメッセージ
'7月のメッセージ', // 7月に表示するメッセージ
'8月のメッセージ', // 8月に表示するメッセージ
'9月のメッセージ', // 9月に表示するメッセージ
'10月のメッセージ', // 10月に表示するメッセージ
'11月のメッセージ', // 11月に表示するメッセージ
'12月のメッセージ' // 12月に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var month = now . getMonth(); // 現在の月を、変数monthに代入
function monthlyMessage() {
document . getElementById( 'monthly-message' ) . innerHTML = message[month]; // ID が monthly-message の要素内に月別メッセージを表示
}
window . onload = monthlyMessage; // ページを表示した直後に、monthlyMessage() を呼び出す
// -->
</script>
<!--
var message = new Array( // 月別メッセージを配列に格納
'1月のメッセージ', // 1月に表示するメッセージ
'2月のメッセージ', // 2月に表示するメッセージ
'3月のメッセージ', // 3月に表示するメッセージ
'4月のメッセージ', // 4月に表示するメッセージ
'5月のメッセージ', // 5月に表示するメッセージ
'6月のメッセージ', // 6月に表示するメッセージ
'7月のメッセージ', // 7月に表示するメッセージ
'8月のメッセージ', // 8月に表示するメッセージ
'9月のメッセージ', // 9月に表示するメッセージ
'10月のメッセージ', // 10月に表示するメッセージ
'11月のメッセージ', // 11月に表示するメッセージ
'12月のメッセージ' // 12月に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var month = now . getMonth(); // 現在の月を、変数monthに代入
function monthlyMessage() {
document . getElementById( 'monthly-message' ) . innerHTML = message[month]; // ID が monthly-message の要素内に月別メッセージを表示
}
window . onload = monthlyMessage; // ページを表示した直後に、monthlyMessage() を呼び出す
// -->
</script>
CSS
<style type="text/css">
<!--
div#monthly-message { /* IDが、monthly-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#monthly-message { /* IDが、monthly-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="monthly-message"> </div>
この部分を、JavaScript でコントロールし、月別メッセージを表示させる。