SSブログ

Javascript小僧:デジタル時計(IE11対応コード) [コンピューター]

HTML+Javascriptで作ったデジタル時計で、IE11で動作するように変更したもの
を掲載します。

clock_20140119.jpg

昔のコードについては、

Javascript小僧:デジタル時計(まとめ)
http://cheese999.blog.so-net.ne.jp/2014-01-13

を参照して下さい。

やったぜ!』はこちら。。

<html>
<head lang="ja">
<title>日時の表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">-->
<!--<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">-->
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css">
<!--
/* black */
.TxtCls1 { text-align: center; border-style: none; color:#000000; background-color:transparent; font-size: 22pt }
.TxtCls1a { text-align: center; border-style: none; color:#000000; background-color:transparent; font-size: 11pt }
.TxtCls1b { text-align: left; border-style: none; color:#000000; background-color:transparent; font-size: 22pt }
/* blue */
.TxtCls4 { text-align: center; border-style: none; color:#0000ff; background-color:transparent; font-size: 22pt }
.TxtCls4a { text-align: center; border-style: none; color:#0000ff; background-color:transparent; font-size: 11pt }
/* red */
.TxtCls5 { text-align: center; border-style: none; color:#ff0000; background-color:transparent; font-size: 22pt }
.TxtCls5a { text-align: center; border-style: none; color:#ff0000; background-color:transparent; font-size: 11pt }
/* gray */
.TxtCls6a { text-align: center; border-style: none; color:#999999; background-color:transparent; font-size: 11pt }
-->
</style>
<!--<script type="text/javascript" src="update.js"></script>-->
<script language="JavaScript">
<!--
// 周期呼び出し用変数
var T = new Array(2);
  // T[0] : 現在の日時(1)
  // T[1] : 現在の日時(2)

// clickイベントを発火
// 【引数】
// myEmt1 : clickするエレメント
function ClickMe1(myEmt1){
  // IEの場合
  // 通常、Javascriptで/* */の中はコメントとして解釈され、無視されます。
  // ただし、cc_onと書いてある場合、IEでは有効となるようです。
  // http://msdn.microsoft.com/ja-jp/library/ie/121hztk3%28v=vs.94%29.aspx
  // if( /*@cc_on ! @*/ false ){} のif文は、
  // IEではif(! false){} と解釈され、条件が真(true)となるため、{}の中が実行されます。
  // IE以外では、if(false){} と解釈され、条件が偽(false)となるため、{}の中が実行されません。
  // ですが、IE11では条件が偽となってしまうようです。
  if(/*@cc_on!@*/false){
    //これでclickイベントが発火する
    myEmt1.fireEvent("onclick");
  // IE以外の場合
  }else{
    // イベントオブジェクトを作成
    var event = document.createEvent( "MouseEvents" );
    // イベントの内容を設定
    event.initEvent("click", false, true);
    // イベントを発火させる
    myEmt1.dispatchEvent(event);
  }
}

// clickイベントを複数回発火
// 【引数】
// myEmt1 : clickするエレメント
function ClickMe2(myEmt1){
  // 24hラジオボタンをclick
  var T1=setInterval(function(){ClickMe1(myEmt1)}, 100);
  // 1000msec後に停止
  var T2=setTimeout(function(){clearInterval(T1)}, 1000);
}

// 初期化
function reset2(){
// 現在の日時を表示1(IdTime0, IdTime5, IdTime6, IdRd12h, IdRd24h, T[0])
// 現在の日時を表示2(IdTime0a, IdTime5a, IdTime6a, IdRd12ha, IdRd24ha, T[1])
  clearInterval(T[0]);
  clearInterval(T[1]);
  // IEの場合
  // if(/*@cc_on!@*/false){
  // ユーザーエージェント名(小文字化)
  // IE11のユーザーエージェント名には「msie」という文字列は含まれておらず、
  // その代わりに「trident」という文字が含まれているとのことです。
  var myUA = navigator.userAgent.toLowerCase();
  if(myUA.match(/msie/i) || myUA.match(/trident/i)){
    // 24hラジオボタンをclick
    ClickMe2(document.getElementById("IdRd24h"));
    ClickMe2(document.getElementById("IdRd24ha"));
  // IE以外の場合
  }else{
    ChRdBt1(1); // 24h
    ChRdBt2(1); // 24h
  }
  T[0] = setInterval(function(){
    DspDate1(document.getElementById("IdTime0"),
document.getElementById("IdTime5"),
document.getElementById("IdTime6"),
document.getElementById("IdRd12h"),
document.getElementById("IdRd24h"),
"TxtCls1","TxtCls4","TxtCls5",
"200px", "140px")},500);
  T[1] = setInterval(function(){
    DspDate1(document.getElementById("IdTime0a"),
document.getElementById("IdTime5a"),
document.getElementById("IdTime6a"),
document.getElementById("IdRd12ha"),
document.getElementById("IdRd24ha"),
"TxtCls6a","TxtCls4a","TxtCls5a",
"100px", "80px")},500);
}

// 日時を表示する
function DspDate1(myEmt1,myEmt2,myEmt3, myEmt4, myEmt5,
myCls1, myCls2, myCls3, myWidth1, myWidth2){
  //【変数】
  // myEmt1 : 年月日を表示するエレメント
  // myEmt2 : 曜日を表示するエレメント
  // myEmt3 : 時分秒を表示するエレメント
  // myEmt4 : ラジオボタン1(12h)のエレメント
  // myEmt5 : ラジオボタン2(24h)のエレメント
  // myCls1 : 年月日、時分秒、曜日(平日)のクラス
  // myCls2 : 曜日(土曜)のクラス
  // myCls3 : 曜日(日曜)のクラス
  // myWidth1 : 時分秒の幅(12h)
  // myWidth2 : 時分秒の幅(24h)
  //【コード】
  // クラス名変数
  var myClassName = new Array(myCls1,myCls2,myCls3);
  // 日付オブジェクト
  var myDate = new Date();
  // 年月日
  myEmt1.className = myCls1;
  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 = myWidth1;
  }else if(myEmt5.checked){
    RdBtnNo = 1; // 24h
    myEmt3.style.width = myWidth2;
  }
  myEmt3.className = myCls1;
  myEmt3.value = "] "+YMDHMS4(myDate, RdBtnNo);
}

// 年月日の文字列作成
// Input : 日付オブジェクト(new Date())
// Output : 年月日の文字列
function YMDHMS1(myD2){
  // 年、月、日を算出する。
  var myYear = myD2.getYear(); // 年
  var myMonth = myD2.getMonth() + 1; // 月
  var myDate = myD2.getDate(); // 日
  // 年、月、日の(桁)調整
  var myYear4 = (myYear < 2000) ? myYear+1900 : myYear; // 年
  if(myMonth < 10){myMonth = "0" + myMonth}
  if(myDate < 10){myDate = "0" + myDate}
  // 年月日の文字列を返す
  var string1 = myYear4+"年"+myMonth+"月"+myDate+ "日";
  return(string1);
}

// 曜日の文字列作成
// Input : 日付オブジェクト(new Date())
// Output : 曜日の文字列
function YMDHMS2(myD2){
  // 曜日変数
  var myWeek = new Array("日","月","火","水","木","金","土");
  // 曜日を算出する。
  var myDay = myD2.getDay(); // 曜日
  // 曜日の文字列を返す
  var string1 = myWeek[myDay];
  return(string1);
}

// 曜日の色番号作成
// 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);
}

// 時分秒の文字列作成
// 【引数】
// 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/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;
  }
}

// ラジオボタン(12h/24h)の切替(IdRd12h, IdRd12h)
// 【引数】
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdBt1(RdBtnNo){
  ChRdB1(document.getElementById("IdRd12h"),
  document.getElementById("IdRd24h"), RdBtnNo);
}

// ラジオボタン(12h/24h)の切替(IdRd12ha, IdRd12ha)
// 【引数】
// RdBtnNo : ラジオボタン番号 (0/1 = 12h/24h)
// 【返り値】
// 無し
function ChRdBt2(RdBtnNo){
  ChRdB1(document.getElementById("IdRd12ha"),
  document.getElementById("IdRd24ha"), RdBtnNo);
}
// -->
</script>
</head>
<!-- -->
<body background="gif/kabe.gif" text="#000000" lang="ja" onload="reset2(null)">
<a name="top"></a>
<div id="IdTitle"></div>
<noscript>
<h2>
<img src="gif/warning01.gif" border="0" alt="注意" height="50" width="56" align="absmiddle">
このページは、Javascriptを使用しています。
</h2>
</noscript>
<!-- -->
<div align="center">
<table border="0"><tr>
<!-- 現在の日時(1) -->
<td>
<form>
<!-- 年月日 -->
<input type="text" id="IdTime0" style="width:310px" class="TxtCls1"
 name="NMTime0" value="Date:yyyy年mm月dd日 [" readonly>
<!-- 曜日 -->
<input type="text" id="IdTime5" style="width:30px" class="TxtCls1"
 name="NMTime5" value="x" readonly>
<!-- 時分秒 -->
<input type="text" id="IdTime6" style="width:150px" class="TxtCls1"
 name="NMTime6" value="] hh:mm:ss" readonly>
<!-- ラジオボタン(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>
</td>
</tr></table>
</div>
<div align="right">
<table border="0"><tr>
<!-- 現在の日時(2) -->
<td>
<form>
<!-- 年月日 -->
<input type="text" id="IdTime0a" style="width:160px" class="TxtCls6a"
 name="NMTime0a" value="Date:yyyy年mm月dd日 [" readonly>
<!-- 曜日 -->
<input type="text" id="IdTime5a" style="width:15px" class="TxtCls6a"
 name="NMTime5a" value="x" readonly>
<!-- 時分秒 -->
<input type="text" id="IdTime6a" style="width:80px" class="TxtCls6a"
 name="NMTime6a" value="] hh:mm:ss" readonly>
</form>
</td><td class="TxtCls6a">
<form>
<!-- ラジオボタン(12h) -->
 12h<input type="radio" id="IdRd12ha" name="NMRd12ha" value="0"
onClick="ChRdBt2(0)" onFocus="ChRdBt2(0)">
<!-- ラジオボタン(24h) -->
24h<input type="radio" id="IdRd24ha" name="NMRd24ha" value="1"
onClick="ChRdBt2(1)" onFocus="ChRdBt2(1)" checked>
</form>
</td>
</tr></table>
</div>
</body>
</html>

タグ:HTML JavaScript
ヤバイぜ!(6)  コメント(1)  トラックバック(0) 
共通テーマ:日記・雑感

ヤバイぜ! 6

コメント 1

cheese999

「やったぜ!」 ありがとうございます。[__猫]
by cheese999 (2014-01-19 20:34) 

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字(英大文字の「オー」、英小文字の「ユー」、アラビア数字の「ハチ」、アラビア数字の「イチ」、アラビア数字の「ニ」)を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。