Javascript小僧：12h/24h切替(2) [コンピューター]
HTML+Javascriptで作ったデジタル時計に追加した
ラジオボタンによる『12h/24h切替』機能について解説します。
(1) 12h
(2) 24h
１．HTML
まず、HTMLで、「12h」と「24h」の２つのラジオボタンを記述します。
<form>
（中略）
<!-- ラジオボタン(12h) -->
12h<input type="radio" id="IdRd12h" name="NMRd12h" value="0"
onClick="ChRdBt1(0)" onFocus="ChRdBt1(0)">
<!-- ラジオボタン(24h) -->
24h<input type="radio" id="IdRd24h" name="NMRd24h" value="1"
onClick="ChRdBt1(1)" onFocus="ChRdBt1(1)" checked>
</form>
ネットでラジオボタンについて調べると、nameを揃えてグループ化することで、
グループ内のボタンの内、１つだけチェックが入るようになるようです。
ですが、今回は、クリックされたボタンだけチェックが入るように
Javascriptで制御しますので、nameはあえて揃えません。
ラジオボタンが選択されたとき、Javascriptを起動するために、onClickと
onFocusの両方でChRdBt1関数をコールしています。どのブラウザでも動く
ようにするためには、onClick/onFocusの両方を記述していた方が良いようです。
http://www.enjoyxstudy.com/misc/radio_event/radio.html
「12h」のボタンが選択されたときは、引数=0でChRdBt1関数をコールします。
「24h」のボタンが選択されたときは、引数=1でChRdBt1関数をコールします。
HTMLがロードされたときに初期化を行うJavascriptを起動するために次の記述をします。
<body onload="reset2(null)">
これで、reset2関数がHTMLロード時にコールされます。
２．Javascript
12h/24hのボタンがクリックされたときにコールされるChRdBt1関数は次の通りです。
// ラジオボタン(12h/24h)の切替(IdRd12h, IdRd12h)
// 【引数】
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdBt1(RdBtnNo){
ChRdB1(document.getElementById("IdRd12h"),
document.getElementById("IdRd24h"), RdBtnNo);
}
12hボタンのエレメント、24hボタンのエレメント、ラジオボタン番号を
引数として、ChRdB1関数をコールします。
// ラジオボタン(12h/24h)の切替
// 【引数】
// myEmt1 : ラジオボタン1(12h)のエレメント
// myEmt2 : ラジオボタン2(24h)のエレメント
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdB1(myEmt1, myEmt2, RdBtnNo){
switch(RdBtnNo){
case 0: // 12h
myEmt1.checked = true;
myEmt2.checked = false;
break;
case 1: // 24h
myEmt1.checked = false;
myEmt2.checked = true;
break;
default:
alert("RdBtnNoが範囲外[ChRdB1]");
break;
}
}
クリックされたボタンのchecked属性をtrueにして、ボタンが選択された状態にします。
クリックされなかったボタンのchecked属性をfalseにして、ボタンが選択されていない状態にします。
HTMLがロードされたとき、強制的に24hが選択された状態にするため、ChRdB1関数で
行おうとしたのですが、IEでは動きませんでした。
そこで、クリックイベントをJavascriptで発生させることにしました。
// clickイベントを発火
// 【引数】
// myEmt1 : clickするエレメント
function ClickMe1(myEmt1){
// IEの場合
if( /*@cc_on ! @*/ false ){
//これでclickイベントが発火する
myEmt1.fireEvent("onclick");
// IE以外の場合
}else{
// イベントオブジェクトを作成
var event = document.createEvent( "MouseEvents" );
// イベントの内容を設定
event.initEvent("click", false, true);
// イベントを発火させる
myEmt1.dispatchEvent(event);
}
}
ClickMe1関数を、クリックしたいボタンのエレメントを引数としてコール
すると、マウスでクリックしたのと同じになります。
http://yuuxxxx.hatenablog.com/entry/2013/09/20/224801
を参考にさせていただきました。
HTMLロード時にコールされるreset2関数は次の様になっています。
// 初期化
function reset2(){
（中略）
// 現在の日時を表示(IdTime0, IdTime5, IdTime6, IdRd12h, IdRd24h, T[0])
clearInterval(T[0]);
// IEの場合
if( /*@cc_on ! @*/ false ){
// 24hラジオボタンをclick
var T1=setInterval(function(){
ClickMe1(document.getElementById("IdRd24h"))}, 100);
// 1000msec後に停止
var T2=setTimeout(function(){
clearInterval(T1)}, 1000);
// IE以外の場合
}else{
ChRdBt1(1); // 24h
}
T[0] = setInterval(function(){
DspDate1(document.getElementById("IdTime0"),
document.getElementById("IdTime5"),
document.getElementById("IdTime6"),
document.getElementById("IdRd12h"),
document.getElementById("IdRd24h"))},500);
（中略）
}
IEの場合、ClickMe1関数でボタンをクリックすることで24hに切り替えます。
実際に動かしてみて分かったことなのですが、１回クリックしただけではダメで、
setIntervalで100msec間隔で10回クリックして止めたところ、うまくいきました。
IE以外の場合は、ChRdBt1関数を引数=1でコールすることで24hに切り替えています。
24hに切り替えた後、DspDate1関数を500msec間隔で周期起動して日時を表示します。
引数は年月日、曜日、時分秒、12hボタン、24hボタンの５つのエレメントです。
DspDate1関数は次の様になっています。
// 日時を表示する
function DspDate1(myEmt1,myEmt2,myEmt3, myEmt4, myEmt5){
//【変数】
// myEmt1 : 年月日を表示するエレメント
// myEmt2 : 曜日を表示するエレメント
// myEmt3 : 時分秒を表示するエレメント
// myEmt4 : ラジオボタン1(12h)のエレメント
// myEmt5 : ラジオボタン2(24h)のエレメント
//【コード】
// クラス名変数
var myClassName = new Array("TxtCls1","TxtCls4","TxtCls5");
// 日付オブジェクト
var myDate = new Date();
// 年月日
myEmt1.className = "TxtCls1b";
myEmt1.value = "Date:"+YMDHMS1(myDate)+" [";
// 曜日
myEmt2.className = myClassName[YMDHMS3(myDate)];
myEmt2.value = YMDHMS2(myDate);
// 時分秒
// 12h/24h判定
var RdBtnNo = 1; // 24h
if(myEmt4.checked){
RdBtnNo = 0; // 12h
myEmt3.style.width = "200px";
}else if(myEmt5.checked){
RdBtnNo = 1; // 24h
myEmt3.style.width = "150px";
}
myEmt3.className = myClassName[0];
myEmt3.value = "] "+YMDHMS4(myDate, RdBtnNo);
}
時分秒の表示において、24hが選択されている場合は、フィールドの幅を150pxにします。
そして、時分秒の文字列を作成するYMDHMS4関数を現在の時刻情報とRdBtnNo = 1(24h)を引数と
してコールします。
12hが選択されている場合は、フィールドの幅を200pxにして、AM/PMの分の幅を確保します。
そして、時分秒の文字列を作成するYMDHMS4関数を現在の時刻情報とRdBtnNo = 0(12h)を引数と
してコールします。
inputフィールドの幅ですが、普通size属性で指定するのですが、ブラウザによる違いが出るとのことなので、
スタイルシートのwidth属性で指定しています。
http://www.form-keeper.com/efo-blog/in-form/the-wide-differences-in-birth-size-input-by-the-browser/
YMDHMS4関数は次の様になっています。
// 時分秒の文字列作成
// 【引数】
// myD2 : 日付オブジェクト(new Date())
// RdBtnNo : ラジオボタン番号（0/1 = 12h/24h)
// 【返り値】
// 時分秒の文字列
function YMDHMS4(myD2, RdBtnNo){
// 時、分、秒を算出する。
var myHours = myD2.getHours(); // 時
var myMinutes = myD2.getMinutes(); // 分
var mySeconds = myD2.getSeconds(); // 秒
// 12h/24h処理
switch(RdBtnNo){
case 0: // 12h
if(myHours>=12){
var AmPm = "PM"; // 午後
myHours -= 12;
}else{
var AmPm = "AM"; // 午前
}
break;
case 1: // 24h
var AmPm = "";
break;
}
// 時、分、秒の桁調整
if(myHours < 10){myHours = "0" + myHours} // 時
if(myMinutes < 10){myMinutes = "0" + myMinutes} // 分
if(mySeconds < 10){mySeconds = "0" + mySeconds} // 秒
// 時分秒の文字列を返す
var string1 = AmPm+" "+myHours+":"+myMinutes+":"+mySeconds;
return(string1);
}
12hが選択されている場合は、
(1) 時間の値が12以上の場合はPMを付けて、時間の値から12引く。
(2) 時間の値が12以上でない場合は、AMを付ける。
24hが選択されている場合は、AM/PMを付けない。
長い記事におつきあいくださいまして、ありがとうございます。![[猫]](https://blog.ss-blog.jp/_images_e/101.gif)
ラジオボタンによる『12h/24h切替』機能について解説します。
(1) 12h
(2) 24h
１．HTML
まず、HTMLで、「12h」と「24h」の２つのラジオボタンを記述します。
<form>
（中略）
<!-- ラジオボタン(12h) -->
12h<input type="radio" id="IdRd12h" name="NMRd12h" value="0"
onClick="ChRdBt1(0)" onFocus="ChRdBt1(0)">
<!-- ラジオボタン(24h) -->
24h<input type="radio" id="IdRd24h" name="NMRd24h" value="1"
onClick="ChRdBt1(1)" onFocus="ChRdBt1(1)" checked>
</form>
ネットでラジオボタンについて調べると、nameを揃えてグループ化することで、
グループ内のボタンの内、１つだけチェックが入るようになるようです。
ですが、今回は、クリックされたボタンだけチェックが入るように
Javascriptで制御しますので、nameはあえて揃えません。
ラジオボタンが選択されたとき、Javascriptを起動するために、onClickと
onFocusの両方でChRdBt1関数をコールしています。どのブラウザでも動く
ようにするためには、onClick/onFocusの両方を記述していた方が良いようです。
http://www.enjoyxstudy.com/misc/radio_event/radio.html
「12h」のボタンが選択されたときは、引数=0でChRdBt1関数をコールします。
「24h」のボタンが選択されたときは、引数=1でChRdBt1関数をコールします。
HTMLがロードされたときに初期化を行うJavascriptを起動するために次の記述をします。
<body onload="reset2(null)">
これで、reset2関数がHTMLロード時にコールされます。
２．Javascript
12h/24hのボタンがクリックされたときにコールされるChRdBt1関数は次の通りです。
// ラジオボタン(12h/24h)の切替(IdRd12h, IdRd12h)
// 【引数】
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdBt1(RdBtnNo){
ChRdB1(document.getElementById("IdRd12h"),
document.getElementById("IdRd24h"), RdBtnNo);
}
12hボタンのエレメント、24hボタンのエレメント、ラジオボタン番号を
引数として、ChRdB1関数をコールします。
// ラジオボタン(12h/24h)の切替
// 【引数】
// myEmt1 : ラジオボタン1(12h)のエレメント
// myEmt2 : ラジオボタン2(24h)のエレメント
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdB1(myEmt1, myEmt2, RdBtnNo){
switch(RdBtnNo){
case 0: // 12h
myEmt1.checked = true;
myEmt2.checked = false;
break;
case 1: // 24h
myEmt1.checked = false;
myEmt2.checked = true;
break;
default:
alert("RdBtnNoが範囲外[ChRdB1]");
break;
}
}
クリックされたボタンのchecked属性をtrueにして、ボタンが選択された状態にします。
クリックされなかったボタンのchecked属性をfalseにして、ボタンが選択されていない状態にします。
HTMLがロードされたとき、強制的に24hが選択された状態にするため、ChRdB1関数で
行おうとしたのですが、IEでは動きませんでした。
そこで、クリックイベントをJavascriptで発生させることにしました。
// clickイベントを発火
// 【引数】
// myEmt1 : clickするエレメント
function ClickMe1(myEmt1){
// IEの場合
if( /*@cc_on ! @*/ false ){
//これでclickイベントが発火する
myEmt1.fireEvent("onclick");
// IE以外の場合
}else{
// イベントオブジェクトを作成
var event = document.createEvent( "MouseEvents" );
// イベントの内容を設定
event.initEvent("click", false, true);
// イベントを発火させる
myEmt1.dispatchEvent(event);
}
}
ClickMe1関数を、クリックしたいボタンのエレメントを引数としてコール
すると、マウスでクリックしたのと同じになります。
http://yuuxxxx.hatenablog.com/entry/2013/09/20/224801
を参考にさせていただきました。
HTMLロード時にコールされるreset2関数は次の様になっています。
// 初期化
function reset2(){
（中略）
// 現在の日時を表示(IdTime0, IdTime5, IdTime6, IdRd12h, IdRd24h, T[0])
clearInterval(T[0]);
// IEの場合
if( /*@cc_on ! @*/ false ){
// 24hラジオボタンをclick
var T1=setInterval(function(){
ClickMe1(document.getElementById("IdRd24h"))}, 100);
// 1000msec後に停止
var T2=setTimeout(function(){
clearInterval(T1)}, 1000);
// IE以外の場合
}else{
ChRdBt1(1); // 24h
}
T[0] = setInterval(function(){
DspDate1(document.getElementById("IdTime0"),
document.getElementById("IdTime5"),
document.getElementById("IdTime6"),
document.getElementById("IdRd12h"),
document.getElementById("IdRd24h"))},500);
（中略）
}
IEの場合、ClickMe1関数でボタンをクリックすることで24hに切り替えます。
実際に動かしてみて分かったことなのですが、１回クリックしただけではダメで、
setIntervalで100msec間隔で10回クリックして止めたところ、うまくいきました。
IE以外の場合は、ChRdBt1関数を引数=1でコールすることで24hに切り替えています。
24hに切り替えた後、DspDate1関数を500msec間隔で周期起動して日時を表示します。
引数は年月日、曜日、時分秒、12hボタン、24hボタンの５つのエレメントです。
DspDate1関数は次の様になっています。
// 日時を表示する
function DspDate1(myEmt1,myEmt2,myEmt3, myEmt4, myEmt5){
//【変数】
// myEmt1 : 年月日を表示するエレメント
// myEmt2 : 曜日を表示するエレメント
// myEmt3 : 時分秒を表示するエレメント
// myEmt4 : ラジオボタン1(12h)のエレメント
// myEmt5 : ラジオボタン2(24h)のエレメント
//【コード】
// クラス名変数
var myClassName = new Array("TxtCls1","TxtCls4","TxtCls5");
// 日付オブジェクト
var myDate = new Date();
// 年月日
myEmt1.className = "TxtCls1b";
myEmt1.value = "Date:"+YMDHMS1(myDate)+" [";
// 曜日
myEmt2.className = myClassName[YMDHMS3(myDate)];
myEmt2.value = YMDHMS2(myDate);
// 時分秒
// 12h/24h判定
var RdBtnNo = 1; // 24h
if(myEmt4.checked){
RdBtnNo = 0; // 12h
myEmt3.style.width = "200px";
}else if(myEmt5.checked){
RdBtnNo = 1; // 24h
myEmt3.style.width = "150px";
}
myEmt3.className = myClassName[0];
myEmt3.value = "] "+YMDHMS4(myDate, RdBtnNo);
}
時分秒の表示において、24hが選択されている場合は、フィールドの幅を150pxにします。
そして、時分秒の文字列を作成するYMDHMS4関数を現在の時刻情報とRdBtnNo = 1(24h)を引数と
してコールします。
12hが選択されている場合は、フィールドの幅を200pxにして、AM/PMの分の幅を確保します。
そして、時分秒の文字列を作成するYMDHMS4関数を現在の時刻情報とRdBtnNo = 0(12h)を引数と
してコールします。
inputフィールドの幅ですが、普通size属性で指定するのですが、ブラウザによる違いが出るとのことなので、
スタイルシートのwidth属性で指定しています。
http://www.form-keeper.com/efo-blog/in-form/the-wide-differences-in-birth-size-input-by-the-browser/
YMDHMS4関数は次の様になっています。
// 時分秒の文字列作成
// 【引数】
// myD2 : 日付オブジェクト(new Date())
// RdBtnNo : ラジオボタン番号（0/1 = 12h/24h)
// 【返り値】
// 時分秒の文字列
function YMDHMS4(myD2, RdBtnNo){
// 時、分、秒を算出する。
var myHours = myD2.getHours(); // 時
var myMinutes = myD2.getMinutes(); // 分
var mySeconds = myD2.getSeconds(); // 秒
// 12h/24h処理
switch(RdBtnNo){
case 0: // 12h
if(myHours>=12){
var AmPm = "PM"; // 午後
myHours -= 12;
}else{
var AmPm = "AM"; // 午前
}
break;
case 1: // 24h
var AmPm = "";
break;
}
// 時、分、秒の桁調整
if(myHours < 10){myHours = "0" + myHours} // 時
if(myMinutes < 10){myMinutes = "0" + myMinutes} // 分
if(mySeconds < 10){mySeconds = "0" + mySeconds} // 秒
// 時分秒の文字列を返す
var string1 = AmPm+" "+myHours+":"+myMinutes+":"+mySeconds;
return(string1);
}
12hが選択されている場合は、
(1) 時間の値が12以上の場合はPMを付けて、時間の値から12引く。
(2) 時間の値が12以上でない場合は、AMを付ける。
24hが選択されている場合は、AM/PMを付けない。
長い記事におつきあいくださいまして、ありがとうございます。
タグ：HTML JavaScript
やったぜ！ ありがとうございます。
(^_0)ノ
by cheese999 (2014-01-11 22:02)