高級化の始まり
前回は本日の日付を表示するコードに注目しました。何度、起動しても同じ結果が得られるので面白みに欠けてましたが、わずかなプログラムコードで西暦年、うるう年に対応した大の月、小の月、7曜日などを表示しました。
今回は、前回の機能に加えて時刻を表示してみます。また、配列を用いて表示文字の色を毎回、変えて表示します。時刻は時々刻々、更新されるので駅前の時刻表示装置に近づき、高級化が始まります。以下に高級化の目玉を上げます。
高級化の目玉
❶表示行が変わるごとに文字の色を変える。
❷現在時刻を表示して結果が時々刻々、変わる。
❸自動開始では説明文を表示できないので、実行開始のボタンを設けた。
❹所定回数の実行後に終了処理を実行する。
コードの解説
①25行目、開始ボタンを定義。TimeOut関数が起動される。
②7行目、1秒ごとに起動する関数。
③8行目、14回の実行で打ち止め。
④9行目、本日の日付と現在時刻取得関数を呼ぶ。
⑤10～13行目、年、月、曜日、日を求める。
⑥14～16行目、時、分、秒を求める。
⑦22行目、簡易方法で処理を終了させる。
※20行、現状において、Chrome、Fc2のブラウザで正常動作を確認しましたが、Internet ExplorerとMicrosoft Edgeにおいて、setTimeoutの動作が期待通りになりません。また、20行を、setTimeout(‘TimeOut()’, 1000);のように第一引数を引用符で括るとどのブラウザでも期待した動作になりません。
サンプルコード
[html]
<html>
<script type="text/javascript">
const DayWeek = ["日", "月", "火", "水", "木", "金", "土"];
const DayColor = ["orange", "powderblue", "red", "sienna", "springgreen", "blue", "magenta"];
var counter = -1;
// Tiny-B.html
function TimeOut(){ // 1秒ごとに起動する関数
if(++counter < 14){ // 14回の実行で停止する
var date=new Date(); // 今日の日付データを変数dateに格納
var year = date.getFullYear(); // 年
var month = date.getMonth()+1; // 月
var week = date.getDay(); // 曜日
var day = date.getDate(); // 日
var hour = date.getHours(); // 時
var minute = date.getMinutes(); // 分
var second = date.getSeconds(); // 秒
var hiduke = "西暦"+year+"年"+month+"月"+day+"日 "+DayWeek[week]+"曜日 ";
var jikoku = hour+"時"+minute+"分"+second+"秒 "+"Counter="+counter+"<BR>";
document.write((hiduke+jikoku).fontcolor(DayColor[counter%7]).fontsize(6));
setTimeout(TimeOut, 1000); // 1秒ごとにTimeOut関数を実行する
}
else javascript_die(); // finish、簡便式で実行終了
}
</script>
<button onClick="TimeOut();">クリックして現在時刻をご覧ください。</button>
</html>
[/html]
実行例