時刻毎のメッセージと画像を表示する JavaScript |
戻 る |
* 指定時刻ごとに違ったメッセージと画像が表示出来ます。
分単位で指定出来るようになりました。
* 表示の自動更新をします。（更新時間は指定可能）
* Internet Explorer 6 および Netscape 7 で
動作確認しています。
「入力事項」の部分で、色に合わせて、次の設定をします。
（太字は入力可能場所）
■ 早い時刻から順番に、表示を開始する 時、分 を入力します。
次に指定する時刻まで、同じ表示となります。 時刻は２４時制で指定します。
■ 該当時間帯に表示する画像の、アドレス含むファイル名を入力します。
■ 該当時間帯に表示するメッセージを入力。 <b>、<marquee>等のタグも使えます。
■ 画像の、画面左から、画面上から、の位置を指定します。 (px)
■ 画像の、表示したい幅を指定します。画像高さは、元の画像の縦横比より自動決定されます。
■ メッセージ枠の、画面左から、画面上から、の位置を指定します。 (px)
■ メッセージ枠の、幅 と 高さ を指定します。 (px)
■ メッセージの文字の 大きさ と 色 を指定します。
■ メッセージ枠の種類を指定します。 スタイルシートの指定に従います。
dotted , dashed , solid , double , inset , outset , ridge , groove 等
■ メッセージ枠の 太さ , 枠色 , 背景色 を指定します。
■ 表示内容の自動更新時間を、秒単位で指定します。
// ***************************** 入力事項 ******************************
// ======= 入力１：時刻指定、およびメッセージと画像の種類
// １番目の数字で、表示開始の時間を指定。
// ２番目の数字で、表示開始の分を指定。
// ３番目に、該当時間帯に表示する画像の、アドレス含むファイル名を入力。
// ４番目に、該当時間帯に表示するメッセージを入力。タグも使えます。
mess[0]=new Array( 1, 0, "mess/samp0.jpg", "熟睡中で〜す♪" );
mess[1]=new Array( 6, 0, "mess/samp1.jpg", "朝ご飯は済んだ？" );
mess[2]=new Array( 7, 30, "mess/samp2.jpg", "さあ今日も頑張ろう！" );
mess[3]=new Array( 12, 0, "mess/samp3.jpg", "さあお昼だよ〜♪" );
mess[4]=new Array( 13, 0, "mess/samp4.jpg", "昼からも頑張ろう！" );
mess[5]=new Array( 17, 0, "mess/samp5.jpg", "仕事も終わったよ！" );
mess[6]=new Array( 18, 30, "mess/samp6.jpg", "晩ご飯は何だろう？" );
mess[7]=new Array( 20, 0, "mess/samp7.jpg", "テレビでも見よう〜" )
// ======= 入力２：画像の表示位置
picX = 500 ; // 画面左から、画像の左端までの距離（ピクセル）
picY = 80 ; // 画面上から、表示の上端までの距離（ピクセル）
picW = 250 ; // 画像の表示幅を指定（ピクセル）
// ======= 入力３：メッセージ枠の表示位置・大きさ・デザイン
mesX = 510 ; // 画面左から、メッセージ枠の左端までの距離（ピクセル）
mesY = 270 ; // 画面上から、メッセージ枠の上端までの距離（ピクセル）
haba = 230 ; // メッセージ枠の幅（ピクセル）
taka = 28 ; // メッセージ枠の高さ（ピクセル）
Msiz = "11pt" ; // メッセージの文字の大きさ
Mcol = "#000000" ; // メッセージの文字の色
Wsty = "inset" ; // メッセージの枠の種類 (スタイルシートによる)
Wwid = 1 ; // メッセージの枠の太さ (pixで指定、枠線なしなら「0」)
Wclr = "#ffffff" ; // メッセージの枠の色
Bclr = "#ffddff" ; // メッセージの背景色
// ======= 入力４：補助入力事項
tim = 10 ; // 表示の自動更新時間（秒）
// *************************** 入力事項ここまで **************************
<script type="text/javascript">
<!--// henka2d ver1.00 （ぱーぷりんの溜まり場）
mess=new Array(); // この行は触らないで・・
// ***************************** 入力事項 ******************************
// ======= 入力１：時刻指定、およびメッセージと画像の種類
// １番目の数字で、表示開始の時間を指定。
// ２番目の数字で、表示開始の分を指定。
// ３番目に、該当時間帯に表示する画像の、アドレス含むファイル名を入力。
// ４番目に、該当時間帯に表示するメッセージを入力。タグも使えます。
mess[0]=new Array( 1, 0, "mess/samp0.jpg", "熟睡中で〜す♪" );
mess[1]=new Array( 6, 0, "mess/samp1.jpg", "朝ご飯は済んだ？" );
mess[2]=new Array( 7, 30, "mess/samp2.jpg", "さあ今日も頑張ろう！" );
mess[3]=new Array( 12, 0, "mess/samp3.jpg", "さあお昼だよ〜♪" );
mess[4]=new Array( 13, 0, "mess/samp4.jpg", "昼からも頑張ろう！" );
mess[5]=new Array( 17, 0, "mess/samp5.jpg", "仕事も終わったよ！" );
mess[6]=new Array( 18, 30, "mess/samp6.jpg", "晩ご飯は何だろう？" );
mess[7]=new Array( 20, 0, "mess/samp7.jpg", "テレビでも見よう〜" )
// ======= 入力２：画像の表示位置
picX = 500 ; // 画面左から、画像の左端までの距離（ピクセル）
picY = 80 ; // 画面上から、表示の上端までの距離（ピクセル）
picW = 250 ; // 画像の表示幅を指定（ピクセル）
// ======= 入力３：メッセージ枠の表示位置・大きさ・デザイン
mesX = 510 ; // 画面左から、メッセージ枠の左端までの距離（ピクセル）
mesY = 270 ; // 画面上から、メッセージ枠の上端までの距離（ピクセル）
haba = 230 ; // メッセージ枠の幅（ピクセル）
taka = 28 ; // メッセージ枠の高さ（ピクセル）
Msiz = "11pt" ; // メッセージの文字の大きさ
Mcol = "#000000" ; // メッセージの文字の色
Wsty = "inset" ; // メッセージの枠の種類 (スタイルシートによる)
Wwid = 1 ; // メッセージの枠の太さ (pixで指定、枠線なしなら「0」)
Wclr = "#ffffff" ; // メッセージの枠の色
Bclr = "#ffddff" ; // メッセージの背景色
// ======= 入力４：補助入力事項
tim = 10 ; // 表示の自動更新時間（秒）
// *************************** 入力事項ここまで **************************
// 画像・メッセージの仮表示
document.write("<img id='pict' src='"+mess[0][2]+"' width="+picW+" style='position:absolute'>");
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;}
Disp("pict", picX, picY);
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("pict").src=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("pict").src=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>