Dateオブジェクト

JavaScriptに用意されている組み込みオブジェクト
Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される

現在の日付時刻を管理するDateオブジェクトを生成

指定した時点で日付時刻を管理するDateオブジェクトを生成するには、年（西暦4桁）、月、日、時間、分、秒をそれぞれ別々の整数値として引渡します
時間は24時間制で指定
月は1月は「0」、2月は「1」と、月の数字から１を引いて指定する

var now = new Date();

たとえば、2012年７月９日15時55分0秒のDateオブジェクトを生成するには

var theDate = new Date(2012, 06, 09, 15, 55, 0);

たとえば、2012年７月９日午前0時のDateオブジェクトを生成するには

var myDate = new Date(2012, 06, 09);

Dateオブジェクトのメソッド

いったんDateオブジェクトを生成すると、あらかじめ用意されている日付時刻操作のメソッドが使用できる

たとえば、「time1」「time2」の２つのDateオブジェクトがあるとき、その時間差をミリ秒単位で求め、変数「theDiff」に格納する

theDiff = time1.getTime() - time2.getTime();

現在の日付日時を管理するDateオブジェクトを生成する

Dateオブジェクトをそのまま document.write()メソッドに渡すと、toString()という「オブジェクトのデータを文字列形式に変換するメソッド」が自動的に呼び出される

<script>
<!--
var now;
now = new Date();
document.write('<h1>', now, '</h1>');
//-->
</script>

日付を平成形式にフォーマットして表示する

<script>
<!--
var now, heisei, theDate;

now = new Date();
heisei = now.getFullYear() - 1988;
theDate = '平成' + heisei + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日';
now = new Date();
document.write('<h1>', theDate, '</h1>');
//-->
</script>

曜日を表示する

戻り値は、日曜日は「0」月曜日は「1」といった数値になります
「月」「火」・・・という文字に変換するには「配列」を使います

<script>
<!--
var now, heisei, theDate;
var days = new Array('日', '月', '火', '水', '木', '金', '土');
now = new Date();
heisei =now.getFullYear() - 1988;
theDay =days[now.getDay()];
theDate = '平成' + heisei + '年' 
	+ (now.getMonth() +1) + '月' 
	+ now.getDate() + '日'
	+ '（' + theDay + '）';
document.write('<h1>', theDate, '</h1>');
//-->
</script>

日付計算をおこなう

一年後の曜日を求める

「setFullYear」：引数を年に設定
「theDate1.getFullYear()+1」：年に１を足す

<script>
<!--
//来年の今日の曜日を求める
var theDate1, theDay2;
var days = new Array('日', '月', '火', '水', '木', '金', '土');
theDate1 = new Date();
theDate1.setFullYear(theDate1.getFullYear() + 1);
document.write('<h1>一年後の今日は',
	days[theDate1.getDay()],  '曜日です</h1>');
//-->
</script>

今年の残り日数を求める

<script>
<!--
//今年の残り日数を表示する
var now, newYearsDay, diff;
now = new Date();
newYearsDay = new Date(now.getFullYear() + 1, 0, 1);
diff = Math.ceil((newYearsDay.getTime() - now.getTime()) / (24 * 60 * 60 * 1000));
document.write('<h1>今年は残り', diff, '日です</h1>');
//-->
</script>

「now.getFullYear()+1」で今年のとしに1年を足し、来年の年を設定

getTime()メソッド

戻り値はミリ秒単位

Math.ceil()メソッド

小数点以下を切り上げる

《シングルコーテーション》
Google JavaScript Style Guide ではシングルコーテーションの使用を推奨していますが、処理速度が根底にあるルールではなく、単純に統一性の問題です。

http://cou929.nu/data/google_javascript_style_guide/#id45

指定時間後に処理を実行

デジタル時計の作成

タイマー機能
一定時間ごとに処理を繰り返す
windowオブジェクトの「setTimeoutメソッド」を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマー</title>
<style>
input {
 width: 90px;
 font-size: 66px;
 font-family:monospace;
 padding: 8px;
}
p {
 font-size: 40px;
}
</style>
<script>
var hourBox, minBox, secBox;
var timer;

window.onload = init;
function init(){
  hourBox = document.clockForm.hour;
  minBox =  document.clockForm.minute;
  secBox =  document.clockForm.sec;
  dClock();
}
function dClock(){
  var now = new Date();
  var hour = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();

  if (hour < 10)  hour = '0' + hour;
  if (min < 10)  min = '0' + min;
  if (sec < 10)  sec = '0' + sec;
  hourBox.value =hour;
  minBox.value=min;
  secBox.value =sec;
  timer = setTimeout('dClock()', 1000);
}
</script>
</head>
<body>
<form name="clockForm">
<p>
<input type="text" name="hour">時
<input type="text" name="minute">分
<input type="text" name="sec">秒
</p>
</form>
</body>
</html>

DOMによる記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デジタル時計</title>
<style>
#clock {
  width: 450px;
  background-color: #000;
  color: #FFF;
  text-align: center;
  border:10px solid #666;
  font-size: 90px;
  font-family:monospace;
  font-weight:bold;
  padding: 10px 20px;
}
</style>
<script>
var hourSpan, minSpan, secSpan, now;
var hour, min, sec;
window.onload = init;
function init(){
  hourSpan = document.getElementById("hour");
  minSpan =  document.getElementById("min");
  secSpan =  document.getElementById("sec");	
  dClock();
}

function dClock(){
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();

  if (hour < 10) hour = "0" + hour;
  if (min < 10) min = "0" + min;
  if (sec < 10) sec = "0" + sec;

  hourSpan.innerHTML =hour;
  minSpan.innerHTML =min;
  secSpan.innerHTML =sec;
  setTimeout("dClock()",1000);
}
</script>
</head>
<body>
<h1>デジタルク時計</h1>
<div id="clock">
<span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>
</div>
</body>
</html>

まとめ

タイマーを使うと、一定周期で処理を繰り返すことができる
setTimeoutメソッド：タイマーを開始する
clearTimeoutメソッド：タイマーを停止する