現実逃避

javascript

あなたは0x何歳(16進)か調べるスクリプトを内蔵したHTMLをつくってみた．

めんどくさいのでソースを全部はっつける．

使い方はテキストにはっつけてブラウザで開く．UTF-8じゃないとどうなるか知りませんが．

IE以外なら多分動く．IEだと表示が崩れる多分．

結果はこんな感じ．

...やべ，まだ19歳だよ！！！！



って，こんなことしてる場合じゃなかった．ES書こうES.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>round box with border</title>
    <style type="text/css">

* {
  margin: 0;
  padding : 0;
}

.body {
  text-align : center;
}

.form {
  width : 500px;
  margin-left:auto;
  margin-right:auto;
  position : relative;
  overflow : auto;
}

.result {
  width : 500px;
  margin-left:auto;
  margin-right:auto;
}

.line {
  padding-top : 5px;
  padding-bottom : 5px;
  margin-top : 5px;
  margin-bottom : 5px;
  width : 500px;
  overflow : auto;
}

.left { 
  width : 100px;
  float : left;
}

.right {
  width : 400px;
  float : left;
}

    </style>
    <script type="text/javascript">
    
//<![CDATA[

var $ = function (elem) {
    return document.getElementById (elem);
};

var calcAge = function (today, birth) {
    today.year = today.getFullYear ();
    today.month = today.getMonth ();
    today.day = today.getDate ();
    birth.year = birth.getFullYear ();
    birth.month = birth.getMonth ();
    birth.day = birth.getDate ();
    
    return function (ageYear, ageMonth, ageDay) {
	if (birth.day <= today.day) {
	    ageDay = today.day - birth.day;
	    if (birth.month <= today.month) {
		ageMonth = today.month - birth.month;
		ageYear = today.year - birth.year;
	    } else {
		ageMonth = today.month - birth.month + 11;
		ageYear = today.year - birth.year - 1;
	    }
	} else {
	    prevDays = (new Date (today.year, today.month, 0)).getDate ();
	    ageDay = today.day - birth.day + prevDays;
	    if (birth.month <= today.month - 1) {
		ageMonth = today.month - birth.month -1;
		ageYear = today.year - birth.year;
	    } else {
		ageMonth = today.month - birth.month + 11;
		ageYear = today.year - birth.year - 1;
	    }
	    
	}
	return [ageYear, ageMonth, ageDay];
    } (0, 0, 0);
};

var transAge = function (age) {
    return [age[0].toString (16),
	    (Number (age[1]) + 1).toString (16),
	    age[2].toString (16)];
};

var clearForm = function () {
    for (var i = 0; i < arguments.length; i++) {
	arguments[i].value = "";
    }
};

var formattedString = function (name, ageArray) {
    return name + "さんは<b>0x" + ageArray[0] + "歳と0x" + ageArray[1] +
	"ヵ月,0x" + ageArray[2] + "日</b>です";
};

window.onload = function () {
    $ ("ok").onclick = function () {
	var today = new Date ();
	var birth = new Date (Number ($ ("year").value),
	    Number ($ ("month").value) - 1,
	    Number ($ ("day").value));
	// age : list [year, month, day]
	var age = calcAge (today, birth);
	// age : list [hex_year, hex_month, hex_day]
	var hexAge = transAge (age);
	$ ("result").innerHTML = formattedString ($ ("name").value, hexAge);
    };
    
    $ ("clear").onclick = function () {
	$ ("result").innerHTML = "";
	clearForm ($ ("year"), $("month"), $("day"));
    };
};

//]]>

    </script>
  </head>
  <body id="body">
    <div class="form">
      <div class="line">
	<div class="left">
	  お名前
	</div>
	<div class="right">

	  <input type="text" class="name" id="name"/>
	</div>
      </div>
      <div class="line">
	<div class="left">
	  生年月日
	</div>
	<div class="right">
	  西暦
	  <input type="text" class="year" id="year" size="4"/>

	  年
	  <input type="text" class="month" id="month" size="2"/>
	  月
	  <input type="text" class="day" id="day" size="2"/>
	  日
	</div>
      </div>
      <div class="line">
	<div class="left">
	  <input type="button" value="クリア" id="clear" class="clear"/>

	</div>
	<div class="right">
	  <input type="button" id="ok" value="OK" class="clear"/>
	</div>
      </div>      
    </div>
    <div id="result" class="result">
    </div>
  </body>

</html>