JavaScriptのサンプル
時間帯別にメッセージを表示するスクリプトです。
コード
<html>
<head>
<title>TAG index Webサイト</title>
</head>
<body>
<script type="text/javascript">
<!--
// 設定開始（メッセージの内容を設定してください）
var msg1 = '<b>5:00 ～ 8:59</b> … おはようございます！'; // 時間帯1
var msg2 = '<b>9:00 ～ 11:59</b> … 午前中はやる気出ないです。。'; // 時間帯2
var msg3 = '<b>12:00 ～ 13:59</b> … お昼はもう食べた？'; // 時間帯3
var msg4 = '<b>14:00 ～ 17:59</b> … とりあえず午後も頑張りますか'; // 時間帯4
var msg5 = '<b>18:00 ～ 23:59</b> … 風呂入ったかー？'; // 時間帯5
var msg6 = '<b>0:00 ～ 4:59</b> … まだ起きてるの？'; // 時間帯6
// 設定終了
var now = new Date();
var hour = now.getHours();
// 表示開始
// 時間帯1
if(hour >= 5 && hour <= 8){
document.write(msg1);
}
// 時間帯2
else if(hour >= 9 && hour <= 11){
document.write(msg2);
}
// 時間帯3
else if(hour >= 12 && hour <= 13){
document.write(msg3);
}
// 時間帯4
else if(hour >= 14 && hour <= 17){
document.write(msg4);
}
// 時間帯5
else if(hour >= 18 && hour <= 23){
document.write(msg5);
}
// 時間帯6
else{
document.write(msg6);
}
// 表示終了
// -->
</script>
</body>
</html>
解説
表示したい場所にスクリプトを記述します。
// 設定開始 ～ // 設定終了 の部分で、メッセージの内容を設定してください。
このスクリプトは、1日を6つの時間帯で分けています。時間帯の範囲を変更したい場合は、// 表示開始 ～ // 表示終了 の部分で青い数字を書き換えてください。（// 時間帯6 は、// 時間帯1 ～ // 時間帯5 以外の範囲になります。）
// 設定開始 ～ // 設定終了 の部分でメッセージの代わりにイメージタグを記述すると、時間帯別に画像を表示することができます。以下のサンプルを参考にしてください。
青い文字の部分は、必要に応じて書き換えてください。
サンプル
// 設定開始
var msg1 = '<img src="image/t1.gif" alt="朝" width="160" height="50">'; // 時間帯1
var msg2 = '<img src="image/t2.gif" alt="午前" width="160" height="50">'; // 時間帯2
var msg3 = '<img src="image/t3.gif" alt="昼" width="160" height="50">'; // 時間帯3
var msg4 = '<img src="image/t4.gif" alt="午後" width="160" height="50">'; // 時間帯4
var msg5 = '<img src="image/t5.gif" alt="夜" width="160" height="50">'; // 時間帯5
var msg6 = '<img src="image/t6.gif" alt="深夜" width="160" height="50">'; // 時間帯6
// 設定終了
- 表示例