Javascript小僧：曜日に色を付ける(2)：崖の上のジョージ：So-netブログ

	ブログをはじめるログイン

Javascript小僧：曜日に色を付ける(2)　[コンピューター] [編集]

さて、12/23に予告を書いたまま、ほったらかしになっていましたHTML+Javascriptで作ったデジタル時計の曜日に色を付けるプログラムの解説です。

色は平日が「黒」、土曜が「青」、日曜が「赤」です。
まず、「黒」、「青」、「赤」の３つのクラスをスタイルシート(CSS)で定義します。

<style type="text/css">

</style>

色はcolorで指定します。#の次の６桁の数字は２桁ずつ赤(R)、緑(G)、青(B)です。

今日の曜日に合わせて色を変えるためにJavascriptで現在の曜日を調べ、平日なら(0)、土曜なら(1)、日曜なら(2)を返す関数を考えます。以下に関数のコードを示します。

// 曜日の色番号作成
// Input : 日付オブジェクト(new Date())
// Output : 曜日の色番号（0:平日、1:土曜、2:日曜）
function YMDHMS3(myD2){
// 色番号変数
var myColorNo = new Array(2,0,0,0,0,0,1);
// 曜日を算出する。
var myDay = myD2.getDay(); // 曜日
// 曜日の色番号を返す
var myNo = myColorNo[myDay];
return(myNo);
}

この関数の引数はnew Date()です。new Date()は現在の日時情報を得る関数です。

曜日(7個)から0,1,2(3個)の数字を得るため、配列(myColorNo)を定義しています。
配列の内容は、2(日)、0(月) - 0(金)、1(土)となっています。

new Date()から曜日を得るため、getDay()を使います。
getDay()は0(日)、1(月)、- 6(土)を返します。

getDay()が返した数字を添字としてmyColorNo配列を引けば、0:平日、1:土曜、2:日曜が得られます。

次に0, 1, 2の数字をクラス名に変換します。変換のためmyClassName配列に「黒」、「青」、「赤」のクラス名を代入します。

// クラス名変数
var myClassName = new Array("TxtCls1","TxtCls4","TxtCls5");

YMDHMS3関数に現在の日時（new Date()）を代入し、返ってきた0:平日、1:土曜、2:日曜の数字でmyClassName配列を引けば、「黒」、「青」、「赤」のクラス名に変換されます。変換されたクラス名を曜日のテキストフィールドに設定します。

document.getElementById("IdTime5").className = myClassName[YMDHMS3(new Date())];

上記の１文を日時を表示するための関数に埋め込んで周期的に実行します。

// 日時を表示する
function DspDate1(myEmt1,myEmt2,myEmt3, myEmt4, myEmt5){
//【変数】
（中略）
// myEmt2 : 曜日を表示するエレメント
（中略）
// クラス名変数
var myClassName = new Array("TxtCls1","TxtCls4","TxtCls5");
// 日付オブジェクト
var myDate = new Date();
（中略）
// 曜日
myEmt2.className = myClassName[YMDHMS3(myDate)];
myEmt2.value = YMDHMS2(myDate); // 曜日の値（日、月 - 土）を設定
（中略）
}

DspDate1関数を周期的に実行するため、HTMLがロードされたときにコールされるreset2関数には
次の記述があります。

function reset2(){
（中略）
clearInterval(T[0]); // 周期起動を停止
T[0] = setInterval(function(){
DspDate1(document.getElementById("IdTime0"), document.getElementById("IdTime5"), document.getElementById("IdTime6"), document.getElementById("IdRd12h"), document.getElementById("IdRd24h"))},500); // 周期起動
（中略）
}

HTMLがロードされたときにreset2関数をコールするためには、HTMLに次の記述をします。

<body background="gif/kabe.gif" text="#000000" lang="ja" onload="reset2(null)">

bodyタグのonloadにreset2関数を設定しておきます。

曜日のテキストフィールドのHTML部分は次の様になっています。

<input type="text" id="IdTime5" style="width:30px" class="TxtCls1" name="NMTime5" value="x" readonly>

idでjavascriptから制御できるようにしています。
クラスの初期値は「黒」にしています。

次回ネタは、「ラジオボタンで12h/24hを切り替える」です。