トップ 差分 一覧 Farm ソース 検索 ヘルプ PDF RSS ログイン

干支の計算

干支の計算

JavaScipt?で入力された西暦年に対する干支を計算するプロラムを示す。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>干支計算機</title>
<script type="text/javascript">
// 干支名を配列に保存
eto = new Array("子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥");

// 干支の計算
function getEto(){
  // フォームから西暦年を取得
  Y = eval(document.fm.Y.value);
  // 取りだし西暦年を出力
  document.fm.Year.value = Y;
  // 干支の計算と表示
  document.fm.ANS.value = eto[(Y + 8) % 12];
}

// 今年の干支を計算
function getThisEto(){
  // 現在の日付を取得
  d = new Date();
  // 西暦年のみを取りだし、記憶
  Y = d.getFullYear();
  // 干支を返す
  return eto[(Y + 8) % 12];
}
</script>
</head>
<body>
<h1>干支計算機</h1>
<p>干支を調べたい西暦年を入力してください。</p>
<form name="fm">
<input type="text" size="4" name="Y">年
<input type="button" value="干支計算" onClick="getEto()">
<hr>
結果は
<input type="text" size="4" name="Year">は
<input type="text" size="2" name="ANS">年です。
</form>

ちなみに今年は「<span style="color:red;">
<script type="text/javascript">
document.write(getThisEto());
</script>
</span>」年です。
</body>
</html>

この内容のファイル

eto.html(359)

 演習

干支の計算をするページで計算で得られた干支のイラストが表示されるように次のファイルの空欄を埋め、うまく動作したら、実習用サーバにアップロードし、正しく表示されるかを確認してください。

ex_eto.html(318)

干支のイラストは各自で用意する。ファイル名はet0.jpgからeto11.jpgにすること。

行数 ヒント
1〜9 干支の文字。必ず”で囲む
10 干支の画像を表示するIMG要素のid属性の値
11 入力した年数から干支の番号を計算する式(どこかに書いてある)
  • 16行目が入力された西暦年から干支の番号を計算し、その番号から干支の文字をフォームに表示する文

[デザインワーク4]