Javascript で時間毎に指定された表示にする
Javascript : PC時間を拾って時間毎に表示を変える
当ブログのメインサイトとなる Now On The Radio でも使用している時間毎に表示を変えるスクリプトを紹介します。 これは海外向けバージョンでも UTC に変更して使用しております。 (海外向け: Now On The Radio DX)
![]() |
![]() |
上のサンプルはテキスト表示ですが、HTML で指定出来ますので画像でも大丈夫なはずです。 何に使うかはアイデア次第ですが、例えば時間で広告を切り替えるというのにも使用出来そうですね。
JST(日本時間版): PC設定時間よりJST時間を取得します
var nextt = 1; /*– NEXT TIME 使用:1、未使用:0 –*/
var msg = new Array();
var now = new Date();
var day = now.getDay();
var hour = now.getHours();
var day3 = new Array(‘日’,’月’,’火’,’水’,’木’,’金’,’土’);
var youbi= day3[now.getDay()];if(nextt == 1){
var day2 = day;
var hour2 = hour + 1;
if(hour2 == 24){
var day2 = day + 1;
if(day2 == 7){var day2 = 0;}
var hour2 = 0;
}
}msg[0] = ”;
msg[1] = ”;
msg[2] = ”;
msg[3] = ”;
msg[4] = ”;
msg[5] = ”;
msg[6] = ”;
msg[7] = ”;
msg[8] = ”;
msg[9] = ”;
msg[10] = ”;
msg[11] = ”;
msg[12] = ”;
msg[13] = ”;
msg[14] = ”;
msg[15] = ”;
msg[16] = ”;
msg[17] = ”;
msg[18] = ”;
msg[19] = ”;
msg[20] = ”;
msg[21] = ”;
msg[22] = ”;
msg[23] = ”;if(day == 0){ /*–■日■ Sun–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 1){ /*–■月■ Mon–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 2){ /*–■火■ Tue–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 3){ /*–■水■ Wed–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 4){ /*–■木■ Thu–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 5){ /*–■金■ Fri–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else if(day == 6){ /*–■土■ Sat–*/
msg[100] = ”;
msg[101] = ”;
msg[102] = ”;
msg[103] = ”;
msg[104] = ”;
msg[105] = ”;
msg[106] = ”;
msg[107] = ”;
msg[108] = ”;
msg[109] = ”;
msg[110] = ”;
msg[111] = ”;
msg[112] = ”;
msg[113] = ”;
msg[114] = ”;
msg[115] = ”;
msg[116] = ”;
msg[117] = ”;
msg[118] = ”;
msg[119] = ”;
msg[120] = ”;
msg[121] = ”;
msg[122] = ”;
msg[123] = ”;
} else{
msg[hour] = ”;
}
if(msg[hour] == ”){msg[hour] = ‘- none -‘;}
document.write(‘<B><font color=#FF0000>[B13] NOW ON</font> <font color=yellow>[‘ +youbi+ ‘曜日 ‘ +hour+ ‘:00-‘ +hour2+ ‘:00]</font></B><BR>’ +msg[hour]+msg[hour+100]+ ”);
if(nextt == 1){
if(msg[hour2] == ”){msg[hour2] = ‘- none -‘;}
document.write(‘<table><tr><td></td></tr></table><font color=#00cc00><B>NEXT HOUR</B></font><BR>’ +msg[hour2]+msg[hour2 + 100]+ ”);
}document.write(‘<br><font color=yellow>※この時期の中距離局は電波がスキップ<br>して弱くなったり聞こえなくなったりする<br>現象が起こりやすいです。</font>’);
- 「document.write()」 を追加して表示を増やすことも出来ます。
- 「msg[]」 0~23 へは対応する時間のものが表示されます。 ‘内’ にHTMLで改行無しで記入していきます。 ※表示を改行する場合は<BR>タグを使用します。
- msg[] 内の数字が100以上の項目は曜日指定の表示となります。 その曜日のみ表示することが出来ます。 100を引いた数値がJST(時間)となります。
- 一番最初の分の 「var nextt = 1; /*– NEXT TIME 使用:1、未使用:0 –*/」 では次の時間の分を先行表示出来るように指定出来ます。 スケジュール的な物でしたら使用すると便利かも知れませんが、それ以外でしたら未使用の方が良いかもしれません。
- このファイルはHTML内に記入しても良いのですが、一応私は外部ファイルで使用しております。 適当な名前を付けて (例えば:「schedule.js」) 表示する元のHTMLファイルのフォルダーかそれに近いフォルダーへアップロードして使用します。 呼び出しには 「<script language=”JavaScript” src=”(アップロードしたフォルダー名)/(ファイル名).js”></script>」 とHTMLに記入して呼び出します。
- 最後の 「document.write(‘~」 に記入してある内容はサンプルです。 こんな感じで記入します。
以上、簡単ですので質問等は受け付けません。 自己責任で設置して下さいネ。 検索すると多くの先輩サイトの多くのアドバイスが見つかると思いますので、そちらを参考に・・・。
UTC時間表示
UTC表示の場合はやはりPCに設定された時間よりUTCでの時間を取得します。
var nextt = 1; /*– NEXT TIME use:1, not use:0 –*/
var msg = new Array();
var now = new Date();
var day = now.getUTCDay();
var hour = now.getUTCHours();
var day3 = new Array(‘Sun’,’Mon’,’Tue’,’Wed’,’Thu’,’Fri’,’Sat’);
var youbi= day3[now.getUTCDay()];
最初の7行を上記のように書き換えればOKです。
関連記事
