SSブログ
アーウィン女性探偵社 ｜圧力鍋 ブログトップ

Javascript小僧：デジタル時計（まとめ）　[コンピューター]

HTML+Javascriptで作ったデジタル時計に

(1) 曜日（平日、土曜、日曜）に色をつける
(2) 12h/24h切替

の機能を追加したコードを掲載します。

(1) 12h
12h.jpg

(2) 24h
24h.jpg

『やったぜ！』はこちら。。[猫]

<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 }
.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 }
/* red */
.TxtCls5 { text-align: center; border-style: none; color:#ff0000; background-color:transparent; font-size: 22pt }
-->
</style>
<!--<script type="text/javascript" src="update.js"></script>-->
<script language="JavaScript">
<!--
// 周期呼び出し用変数
var T = new Array(1);
  // T[0] : 現在の日時

// 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);
  }
}

// 初期化
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);
}

// 日時を表示する
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);
}

// 年月日の文字列作成
// 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);
}
// -->
</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>
<!-- 現在の日時 -->
<td>
<form>
<!-- 年月日 -->
<input type="text" id="IdTime0" style="width:310px" class="TxtCls1b"
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>
</body>
</html>
タグ：HTML JavaScript デジタル時計
2014-01-13 05:13  ヤバイぜ！(4)  コメント(1)  トラックバック(0) 
共通テーマ：パソコン・インターネット

ヤバイぜ！ 4

コメント 1

cheese999

「やったぜ！」 ありがとうございます。[__猫]
by cheese999 (2014-01-13 05:47) 

コメントを書く

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

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました
アーウィン女性探偵社 ｜圧力鍋 ブログトップ

リンク集

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