デザインワーク4　第4回目

時間利用

日付 オブジェクト

JavaScriptで時間を扱うときは日付のオブジェクトを作り、そのオブジェクトを通して日付の情報を取得する。

d = new Date(); // 日付オブジェクトの作成
Y = d.getFullYear(); // 4桁の西暦年を取得
M = d.getMonth() + 1; // 月数を取得
D = d.getDate(); // 日にちを取得
Yo = d.getDay(); // 曜日を取得
H = d.getHours(); // 時数を取得
mm = d.getMinutes(); // 分数を取得

次のファイルをダウンロードし、動作を確認する。datetest.html(208)

干支の計算

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にすること。

行数	ヒント
１～９	干支の文字。必ず”で囲む
10	干支の画像を表示するIMG要素のid属性の値
11	入力した年数から干支の番号を計算する式(どこかに書いてある)

16行目が入力された西暦年から干支の番号を計算し、その番号から干支の文字をフォームに表示する文

[デザインワーク4]

デジタル時計を作る

次のファイルをダウロード、適当なフォルダに展開し、デジタル時計を完成させる。

dclock.zip(155)

タイマーを作る

次のリストはフォームから入力した分数分の秒数をカウントし、その秒数を表示する。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
P{ font-size : 20pt;}
</style>
<title>キッチンタイマー</title>
<script type="text/javascript">
t = 0;
cnt = 0;

// 時間取得と表示用関数
function DspClk() {
  // 秒数を減らす
  cnt--;
  // 秒数を表示する
  DC = document.getElementById('dsp');
  DC.innerHTML = cnt + "秒";
  // 残り時間0で終了する
  if(cnt <= 0) {
    DC.innerHTML = "時間です!";
    clearInterval(t);
  }
}
// タイマー開始
function start(){
  cnt = eval(document.fm.inv.value) * 60;
  t = setInterval("DspClk()", 1000);
}
// タイマー停止
function stop(){
  // タイマーIDをclearInterval()関数の与えればよい。
  clearInterval(t);
}
</script>

</head>
<body>
<h1>キッチンタイマー</h1>

<p>時間を分数で入力してください</p>
<form name="fm">
<input type="text" name="inv" size="6" value="3">分のタイマー
<input type="button" value="開始" onClick="start()">
<hr>
<p>残り時間　<span id="dsp">000</span></p>
<hr>
<input type="button" value="タイマー停止" onClick="stop()">
</form>
</body>
</html>

timer.html(198)