Javascript小僧：タイムリミットの「日」を設定する（改） [コンピューター]
Javascript小僧：タイムリミットの「日」を設定する
http://blog.so-net.ne.jp/cheese999/2013-10-20
で紹介したコードですが、試験している中で、以下の点を修正しました。
１．タイムリミットを変更している間は、残り時間の周期起動を一時停止して、変てこりんな残り時間が表示されないようにする。
２．タイムリミットの年 or 月を変更したとき、日の設定がその月の最大日を超えているとき、強制的に最大日に変更する。例えば、タイムリミットが2013/3/31に設定されている状態で、月が２に変更されたら、日を28に変更し、タイムリミットを2013/2/28とする。
タイムリミットの西暦年、月、日、時、分、秒にフォーカスが当たったら、FStartEnDayMon1関数を1を付けて呼び出し、フォーカスが外れたらFStartEnDayMon1関数を2を付けて呼び出すようにHTMLを変更。
<form>タイムリミット：<input type="text" size="5" class="TxtCls1a" id="Idyyyy1" name="NMyyyy1"
value="2000" maxlength="4" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>年
(<input type="text" size="8" class="TxtCls1a" id="Idyyyy2" name="NMyyyy2"
value="昭和60" readonly>年)
<select name="SelMonth4" id="IdSelMonth4" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="1">1
（中略）
<option value="12">12
</select>月
<select name="SelDay3" id="IdSelDay3"
onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="1">1
（中略）
<option value="28">28
<option value="29" id="IdOpDay29" disabled>29
<option value="30" id="IdOpDay30" disabled>30
<option value="31" id="IdOpDay31" disabled>31
</select>日
<select name="SelHour3" id="IdSelHour3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="23">23
</select>時
<select name="SelMin3" id="IdSelMin3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="59">59
</select>分
<select name="SelSec3" id="IdSelSec3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="59">59
</select>秒
</form>
なお、HTMLを最初にロードしたとき、周期起動をかけるため、bodyタグには、reset2関数を呼ぶようにしてあります。
<body background="gif/kabe.gif" text="#000000" lang="ja" onload="reset2(null)">
javascript部分ですが、FEnableDayMon1関数に、「年」、「月」の組み合わせから求めた、その月の最終日（NumMDays）とプルダウンメニューで選択されている日を比べて、選択されている日の方が大きい場合、選択されている日を強制的に最終日（NumMDays）に合わせるコードを追加します。
// １か月の日数に応じて日付の選択肢を選択可能（ or 不可能）にする
// 【引数】
// myYear : 西暦の年。４桁。例：2005
// myMonth : 月。(1 - 12)
// Obj1[0], Obj1[1], Obj1[2]：29日、30日、31日のオブジェクト
// Obj1[5]：「日」のプルダウンメニュー全体のオブジェクト
// 【戻り値】
// 無し
// 【コード】
function FEnableDayMon1(myYear, myMonth, Obj1){
Obj1[0].disabled = true; // 29日を選択不可能
Obj1[1].disabled = true; // 30日を選択不可能
Obj1[2].disabled = true; // 31日を選択不可能
var NumMDays = FNumDayMon1(myYear, myMonth); // １か月の日数
if(NumMDays >= 29){Obj1[0].disabled = false} // 29日を選択可能
if(NumMDays >= 30){Obj1[1].disabled = false} // 30日を選択可能
if(NumMDays >= 31){Obj1[2].disabled = false} // 31日を選択可能
// 現在選択されている日が最終日を超えているなら、最終日にずらす。
if((Obj1[5].selectedIndex+1) > NumMDays){
Obj1[5].selectedIndex = NumMDays -1
}
}
プルダウンメニューの１日のselectedIndexは0なので、NumMDays -1を代入しています。
次に、タイムリミットにフォーカスしたとき、周期起動を停止し、タイムリミットからフォーカスが外れた時、周期起動を再開するため、FStartEnDayMon1関数を次のように変更します。
// 【引数】
// mode：モード
// =1 : タイムリミットにフォーカスしたとき
// =2 : タイムリミットからフォーカスが外れた時
function FStartEnDayMon1(mode){
clearInterval(T[2]); // 残り時間を停止
clearInterval(T[3]); // タイムリミットの元号年を停止
clearInterval(T[4]); // FEnableDayMon1関数を停止
// タイムリミットからフォーカスが外れた時
if(mode == 2){
// オブジェクト
var Obj1 = new Array();
Obj1[0] = document.getElementById("IdOpDay29"); // 29日
Obj1[1] = document.getElementById("IdOpDay30"); // 30日
Obj1[2] = document.getElementById("IdOpDay31"); // 31日
Obj1[3] = document.getElementById("Idyyyy1"); // 年
Obj1[4] = document.getElementById("IdSelMonth4"); // 月
Obj1[5] = document.getElementById("IdSelDay3"); // 日
Obj1[6] = document.getElementById("IdTime3_2"); // 残り時間
Obj1[7] = document.getElementById("IdSelHour3"); // 時
Obj1[8] = document.getElementById("IdSelMin3"); // 分
Obj1[9] = document.getElementById("IdSelSec3"); // 秒
Obj1[10] = document.getElementById("Idyyyy2"); // 元号年
// 西暦年が数字じゃなかったら、代替文字を表示
if(isNaN(Obj1[3].value)){
Obj1[6].value = "YY/MM/DD hh:mm:ss";
// 西暦年が数字だったら、残り時間を表示
}else{
T[2] = setInterval(function(){
getElTm1(3,new Date(Obj1[3].value,
Obj1[4].selectedIndex,Obj1[5].selectedIndex+1,Obj1[7].selectedIndex,
Obj1[8].selectedIndex,Obj1[9].selectedIndex,000),Obj1[6])
},500);
}
// タイムリミットの元号年を周期起動
T[3] = setInterval(function(){
FTranYear6(Obj1[3],Obj1[10])
},500);
// FEnableDayMon1関数を周期起動
T[4] = setInterval(function(){
FEnableDayMon1(Obj1[3].value,Obj1[4].selectedIndex+1, Obj1)
},500);
}
}
引数のmodeに関わらず、最初に周期起動を止めます。そしてmodeが2のときのみ、周期起動を再開します。
HTMLを最初にロードしたときコールされるreset2関数にFStartEnDayMon1関数をmode引数を2でコールするコードを追加します。これで、HTMLを最初にロードしたときに周期起動をスタートさせます。
function reset2(){
（中略）
FStartEnDayMon1(2);
（中略）
}
http://blog.so-net.ne.jp/cheese999/2013-10-20
で紹介したコードですが、試験している中で、以下の点を修正しました。
１．タイムリミットを変更している間は、残り時間の周期起動を一時停止して、変てこりんな残り時間が表示されないようにする。
２．タイムリミットの年 or 月を変更したとき、日の設定がその月の最大日を超えているとき、強制的に最大日に変更する。例えば、タイムリミットが2013/3/31に設定されている状態で、月が２に変更されたら、日を28に変更し、タイムリミットを2013/2/28とする。
タイムリミットの西暦年、月、日、時、分、秒にフォーカスが当たったら、FStartEnDayMon1関数を1を付けて呼び出し、フォーカスが外れたらFStartEnDayMon1関数を2を付けて呼び出すようにHTMLを変更。
<form>タイムリミット：<input type="text" size="5" class="TxtCls1a" id="Idyyyy1" name="NMyyyy1"
value="2000" maxlength="4" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>年
(<input type="text" size="8" class="TxtCls1a" id="Idyyyy2" name="NMyyyy2"
value="昭和60" readonly>年)
<select name="SelMonth4" id="IdSelMonth4" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="1">1
（中略）
<option value="12">12
</select>月
<select name="SelDay3" id="IdSelDay3"
onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="1">1
（中略）
<option value="28">28
<option value="29" id="IdOpDay29" disabled>29
<option value="30" id="IdOpDay30" disabled>30
<option value="31" id="IdOpDay31" disabled>31
</select>日
<select name="SelHour3" id="IdSelHour3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="23">23
</select>時
<select name="SelMin3" id="IdSelMin3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="59">59
</select>分
<select name="SelSec3" id="IdSelSec3" onFocus="FStartEnDayMon1(1)" onBlur="FStartEnDayMon1(2)" disabled>
<option value="0">0
（中略）
<option value="59">59
</select>秒
</form>
なお、HTMLを最初にロードしたとき、周期起動をかけるため、bodyタグには、reset2関数を呼ぶようにしてあります。
<body background="gif/kabe.gif" text="#000000" lang="ja" onload="reset2(null)">
javascript部分ですが、FEnableDayMon1関数に、「年」、「月」の組み合わせから求めた、その月の最終日（NumMDays）とプルダウンメニューで選択されている日を比べて、選択されている日の方が大きい場合、選択されている日を強制的に最終日（NumMDays）に合わせるコードを追加します。
// １か月の日数に応じて日付の選択肢を選択可能（ or 不可能）にする
// 【引数】
// myYear : 西暦の年。４桁。例：2005
// myMonth : 月。(1 - 12)
// Obj1[0], Obj1[1], Obj1[2]：29日、30日、31日のオブジェクト
// Obj1[5]：「日」のプルダウンメニュー全体のオブジェクト
// 【戻り値】
// 無し
// 【コード】
function FEnableDayMon1(myYear, myMonth, Obj1){
Obj1[0].disabled = true; // 29日を選択不可能
Obj1[1].disabled = true; // 30日を選択不可能
Obj1[2].disabled = true; // 31日を選択不可能
var NumMDays = FNumDayMon1(myYear, myMonth); // １か月の日数
if(NumMDays >= 29){Obj1[0].disabled = false} // 29日を選択可能
if(NumMDays >= 30){Obj1[1].disabled = false} // 30日を選択可能
if(NumMDays >= 31){Obj1[2].disabled = false} // 31日を選択可能
// 現在選択されている日が最終日を超えているなら、最終日にずらす。
if((Obj1[5].selectedIndex+1) > NumMDays){
Obj1[5].selectedIndex = NumMDays -1
}
}
プルダウンメニューの１日のselectedIndexは0なので、NumMDays -1を代入しています。
次に、タイムリミットにフォーカスしたとき、周期起動を停止し、タイムリミットからフォーカスが外れた時、周期起動を再開するため、FStartEnDayMon1関数を次のように変更します。
// 【引数】
// mode：モード
// =1 : タイムリミットにフォーカスしたとき
// =2 : タイムリミットからフォーカスが外れた時
function FStartEnDayMon1(mode){
clearInterval(T[2]); // 残り時間を停止
clearInterval(T[3]); // タイムリミットの元号年を停止
clearInterval(T[4]); // FEnableDayMon1関数を停止
// タイムリミットからフォーカスが外れた時
if(mode == 2){
// オブジェクト
var Obj1 = new Array();
Obj1[0] = document.getElementById("IdOpDay29"); // 29日
Obj1[1] = document.getElementById("IdOpDay30"); // 30日
Obj1[2] = document.getElementById("IdOpDay31"); // 31日
Obj1[3] = document.getElementById("Idyyyy1"); // 年
Obj1[4] = document.getElementById("IdSelMonth4"); // 月
Obj1[5] = document.getElementById("IdSelDay3"); // 日
Obj1[6] = document.getElementById("IdTime3_2"); // 残り時間
Obj1[7] = document.getElementById("IdSelHour3"); // 時
Obj1[8] = document.getElementById("IdSelMin3"); // 分
Obj1[9] = document.getElementById("IdSelSec3"); // 秒
Obj1[10] = document.getElementById("Idyyyy2"); // 元号年
// 西暦年が数字じゃなかったら、代替文字を表示
if(isNaN(Obj1[3].value)){
Obj1[6].value = "YY/MM/DD hh:mm:ss";
// 西暦年が数字だったら、残り時間を表示
}else{
T[2] = setInterval(function(){
getElTm1(3,new Date(Obj1[3].value,
Obj1[4].selectedIndex,Obj1[5].selectedIndex+1,Obj1[7].selectedIndex,
Obj1[8].selectedIndex,Obj1[9].selectedIndex,000),Obj1[6])
},500);
}
// タイムリミットの元号年を周期起動
T[3] = setInterval(function(){
FTranYear6(Obj1[3],Obj1[10])
},500);
// FEnableDayMon1関数を周期起動
T[4] = setInterval(function(){
FEnableDayMon1(Obj1[3].value,Obj1[4].selectedIndex+1, Obj1)
},500);
}
}
引数のmodeに関わらず、最初に周期起動を止めます。そしてmodeが2のときのみ、周期起動を再開します。
HTMLを最初にロードしたときコールされるreset2関数にFStartEnDayMon1関数をmode引数を2でコールするコードを追加します。これで、HTMLを最初にロードしたときに周期起動をスタートさせます。
function reset2(){
（中略）
FStartEnDayMon1(2);
（中略）
}
タグ：JavaScript
2013-10-27 16:59
ヤバイぜ！(5)
コメント(2)
トラックバック(0)
やったぜ！ ありがとうございます。[__猫]
by cheese999 (2013-10-27 20:32)
javascriptのコードを見やすくするため、字下げしました。[__猫]
by cheese999 (2013-10-27 20:34)