JavaScript 、 CSS 、 HTML で作る、曜日別メッセージ。
今日の曜日に応じたメッセージを表示させることができる。例えば、日曜日に、「待ちに待った日曜日♪」と表示させたり、月曜日に、「今週も頑張りましょう！」と表示させたりできる。
実装例
実装例の動作について
日曜日であれば、「日曜日のメッセージ」を表示する。月曜日であれば、「月曜日のメッセージ」を表示する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
var message = new Array(
'日曜日のメッセージ',
'月曜日のメッセージ',
'火曜日のメッセージ',
'水曜日のメッセージ',
'木曜日のメッセージ',
'金曜日のメッセージ',
'土曜日のメッセージ'
);
var now = new Date();
var week = now . getDay();
function weeklyMessage() {
document . getElementById( 'weekly-message' ) . innerHTML = message[week];
}
window . onload = weeklyMessage;
// -->
</script>
<!--
var message = new Array(
'日曜日のメッセージ',
'月曜日のメッセージ',
'火曜日のメッセージ',
'水曜日のメッセージ',
'木曜日のメッセージ',
'金曜日のメッセージ',
'土曜日のメッセージ'
);
var now = new Date();
var week = now . getDay();
function weeklyMessage() {
document . getElementById( 'weekly-message' ) . innerHTML = message[week];
}
window . onload = weeklyMessage;
// -->
</script>
CSS
<style type="text/css">
<!--
div#weekly-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#weekly-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="weekly-message"> </div>
解説
JavaScript
<script type="text/javascript">
<!--
var message = new Array( // 曜日別メッセージを配列に格納
'日曜日のメッセージ', // 日曜日に表示するメッセージ
'月曜日のメッセージ', // 月曜日に表示するメッセージ
'火曜日のメッセージ', // 火曜日に表示するメッセージ
'水曜日のメッセージ', // 水曜日に表示するメッセージ
'木曜日のメッセージ', // 木曜日に表示するメッセージ
'金曜日のメッセージ', // 金曜日に表示するメッセージ
'土曜日のメッセージ' // 土曜日に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var week = now . getDay(); // 現在の曜日を、変数weekに代入
function weeklyMessage() {
document . getElementById( 'weekly-message' ) . innerHTML = message[week]; // ID が weekly-message の要素内に曜日別メッセージを表示
}
window . onload = weeklyMessage; // ページを表示した直後に、weeklyMessage() を呼び出す
// -->
</script>
<!--
var message = new Array( // 曜日別メッセージを配列に格納
'日曜日のメッセージ', // 日曜日に表示するメッセージ
'月曜日のメッセージ', // 月曜日に表示するメッセージ
'火曜日のメッセージ', // 火曜日に表示するメッセージ
'水曜日のメッセージ', // 水曜日に表示するメッセージ
'木曜日のメッセージ', // 木曜日に表示するメッセージ
'金曜日のメッセージ', // 金曜日に表示するメッセージ
'土曜日のメッセージ' // 土曜日に表示するメッセージ
);
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
var week = now . getDay(); // 現在の曜日を、変数weekに代入
function weeklyMessage() {
document . getElementById( 'weekly-message' ) . innerHTML = message[week]; // ID が weekly-message の要素内に曜日別メッセージを表示
}
window . onload = weeklyMessage; // ページを表示した直後に、weeklyMessage() を呼び出す
// -->
</script>
CSS
<style type="text/css">
<!--
div#weekly-message { /* IDが、weekly-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#weekly-message { /* IDが、weekly-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="weekly-message"> </div>
この部分を、JavaScript でコントロールし、曜日別メッセージを表示させる。