時刻毎のメッセージと壁紙を表示

　時刻毎のメッセージと壁紙を表示する JavaScript

JavaScriptの特徴

 * 各時刻ごとに違ったメッセージと壁紙が表示出来ます。
 * 表示の自動更新をします。（更新時間は指定可能）
 * Internet　Explorer 6 および Netscape 7 で動作確認しています。

設定方法

「入力事項」の部分で、色に合わせて、次の設定をします。 （太字は入力可能場所）

 ■ 早い時刻から順番に、表示を開始する 時、分 を入力します。
      次に指定する時刻まで、同じ表示となります。 時刻は２４時制で指定します。
 ■ 該当時間帯に表示する背景画像の、アドレス含むファイル名を入力します。
 ■ 該当時間帯に表示するメッセージを入力。 <b>、<marquee>等のタグも使えます。
 ■ メッセージ枠の、画面左から、画面上から、の位置を指定します。 (px)
 ■ メッセージ枠の、幅 と 高さ を指定します。 (px)
 ■ メッセージの文字の 大きさ と 色 を指定します。 
 ■ メッセージ枠の種類を指定します。 スタイルシートの指定に従います。
      dotted , dashed , solid , double , inset , outset , ridge , groove 等
 ■ メッセージ枠の 太さ , 枠色 , 背景色 を指定します。
 ■ 表示内容の自動更新時間を、秒単位で指定します。

// *****************************  入力事項  ******************************
// ======= 入力１：時刻指定、および画像の種類とメッセージ
// １番目の数字で、表示開始の時間を指定。
// ２番目の数字で、表示開始の分を指定。
// ３番目に、該当時間帯に表示する画像の、アドレス含むファイル名を入力。
// ４番目に、該当時間帯に表示するメッセージを入力。タグも使えます。
mess[0]=new Array(  1,  0, "mess/back0.gif", "熟睡中で～す♪" );
mess[1]=new Array(  6,  0, "mess/back1.gif", "朝ご飯は済んだ？" );
mess[2]=new Array(  7, 30, "mess/back2.gif", "さあ今日も頑張ろう！" );
mess[3]=new Array( 12,  0, "mess/back3.gif", "さあお昼だよ～♪" );
mess[4]=new Array( 13,  0, "mess/back4.gif", "昼からも頑張ろう！" );
mess[5]=new Array( 17,  0, "mess/back5.gif", "仕事も終わったよ！" );
mess[6]=new Array( 18, 30, "mess/back6.gif", "晩ご飯は何だろう？" );
mess[7]=new Array( 20,  0, "mess/back7.gif", "テレビでも見よう～" )
// ======= 入力２：メッセージ枠の表示位置・大きさ・デザイン
mesX = 500 ;       // 画面左から、メッセージ枠の左端までの距離（ピクセル）
mesY =  90 ;       // 画面上から、メッセージ枠の上端までの距離（ピクセル）
haba = 250 ;       // メッセージ枠の幅（ピクセル）
taka =  28 ;       // メッセージ枠の高さ（ピクセル）
Msiz = "11pt" ;    // メッセージの文字の大きさ
Mcol = "#000000" ; // メッセージの文字の色
Wsty = "inset" ;   // メッセージの枠の種類 (スタイルシートによる)
Wwid =   1 ;       // メッセージの枠の太さ (pixで指定、枠線なしなら「0」)
Wclr = "#ffffff" ; // メッセージの枠の色
Bclr = "#ffddff" ; // メッセージの背景色
// ======= 入力３：補助入力事項
tim  =  10 ;       // 表示の自動更新時間（秒）
// *************************** 入力事項ここまで **************************

更新履歴

・ 05/06/09　ver 1.10　スタイルシートによる背景設定に変更
・ 05/01/25　ver 1.00　時間指定を分単位にした。Internet Explorer 6 および Netscape 7 に対応。
・ 03/10/02　ver 0.10　メッセージ指定可能項目を追加
・ 03/09/24　ver 0.00　初　公　開

背景画像

・背景画像は sozai wing さんよりお借りしました。

ソースファイル

・まず、<body> タグに id 属性を、次のように書き加えて下さい。
・他に設定されている、<body> タグの属性は、そのまま継承してください。

<body id="haikei">

・次に下記の部分をコピーアンドペーストして使って下さい。（<body>～</body>の間に置く）
・ここのプログラムをコピーして下さい。（使用例ではバージョンが古いかも？）

<script type="text/javascript">
<!--// henka3d  ver1.10  （ぱーぷりんの溜まり場）
mess=new Array();   // この行は触らないで・・

// *****************************  入力事項  ******************************
// ======= 入力１：時刻指定、および画像の種類とメッセージ
// １番目の数字で、表示開始の時間を指定。
// ２番目の数字で、表示開始の分を指定。
// ３番目に、該当時間帯に表示する画像の、アドレス含むファイル名を入力。
// ４番目に、該当時間帯に表示するメッセージを入力。タグも使えます。
mess[0]=new Array(  1,  0, "mess/back0.gif", "熟睡中で～す♪" );
mess[1]=new Array(  6,  0, "mess/back1.gif", "朝ご飯は済んだ？" );
mess[2]=new Array(  7, 30, "mess/back2.gif", "さあ今日も頑張ろう！" );
mess[3]=new Array( 12,  0, "mess/back3.gif", "さあお昼だよ～♪" );
mess[4]=new Array( 13,  0, "mess/back4.gif", "昼からも頑張ろう！" );
mess[5]=new Array( 17,  0, "mess/back5.gif", "仕事も終わったよ！" );
mess[6]=new Array( 18, 30, "mess/back6.gif", "晩ご飯は何だろう？" );
mess[7]=new Array( 20,  0, "mess/back7.gif", "テレビでも見よう～" )
// ======= 入力２：メッセージ枠の表示位置・大きさ・デザイン
mesX = 500 ;       // 画面左から、メッセージ枠の左端までの距離（ピクセル）
mesY =  90 ;       // 画面上から、メッセージ枠の上端までの距離（ピクセル）
haba = 250 ;       // メッセージ枠の幅（ピクセル）
taka =  28 ;       // メッセージ枠の高さ（ピクセル）
Msiz = "11pt" ;    // メッセージの文字の大きさ
Mcol = "#000000" ; // メッセージの文字の色
Wsty = "inset" ;   // メッセージの枠の種類 (スタイルシートによる)
Wwid =   1 ;       // メッセージの枠の太さ (pixで指定、枠線なしなら「0」)
Wclr = "#ffffff" ; // メッセージの枠の色
Bclr = "#ffddff" ; // メッセージの背景色
// ======= 入力３：補助入力事項
tim  =  10 ;       // 表示の自動更新時間（秒）
// *************************** 入力事項ここまで **************************

// メッセージの仮表示
document.write("<div id='messe' style='position:absolute;padding:5'></div>");

// メッセージ枠の設定
 document.getElementById("messe").style.width =haba;
 document.getElementById("messe").style.height=taka;
 document.getElementById("messe").style.overflow="auto";
 document.getElementById("messe").style.fontSize=Msiz;
 document.getElementById("messe").style.color=Mcol;
 document.getElementById("messe").style.borderStyle=Wsty;
 document.getElementById("messe").style.borderWidth=Wwid;
 document.getElementById("messe").style.borderColor=Wclr;
 if(Bclr!="none"){
 document.getElementById("messe").style.backgroundColor=Bclr;}

 document.getElementById("haikei").background=mess[0][2];
 Disp("messe", mesX, mesY);

 var no=mess.length-1;
 jikan()

// 時間毎の選択
function jikan(){
 var today=new Date();
 var hours=today.getHours();
 var minut=today.getMinutes();
 var ima=hours*60+minut;

for(i=1; i<no-1; i++){
 var tim1=mess[i][0]*60+mess[i][1];
 var tim2=mess[i+1][0]*60+mess[i+1][1];
 if(tim1<=ima && ima<tim2){
  document.getElementById("haikei").style.backgroundImage="url("+mess[i][2]+")";
  document.getElementById("messe").innerHTML=mess[i][3] } }

 var tim1=mess[0][0]*60+mess[0][1];
 var tim2=mess[no][0]*60+mess[no][1];
 if(tim2<=ima || ima<tim1){
  document.getElementById("haikei").style.backgroundImage="url("+mess[no][2]+")";
  document.getElementById("messe").innerHTML=mess[no][3] }
 setTimeout("jikan()",tim*1000) }

// 画像を移動する
function Disp(num,xx,yy){
  document.getElementById(num).style.left=xx;
  document.getElementById(num).style.top =yy }

// -->
</script>