現在の日時を表示する

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

例文

<span id="view_time"></span>

<script type="text/javascript">
document.getElementById("view_time").innerHTML = getNow();

function getNow() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth()+1; //１を足すこと
	var day = now.getDate();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();

	//出力用
	var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 
	return s;
}
</script>

解説

new Date でコンピュータから日付と時間を取得し変数nowへ入れ、その後、日付と時間の各変数へ西暦などの数値を取り出しています。
次にそれらを文字と組み合わせて１つの文章を作り、これを変数msgへ入れ、最後にHTMLの文章として表示をしています。
getMonthには月を示す数値が入るのですが、実際の月よりも１つ少なく、0～11で表されます。そのため何月と表示させたいときには、１を足す必要があります。

応用 - リアルタム更新

リアルタイムに時間を更新します。

ここでは、関数setIntervalを使って、時間の表示を0.5秒毎に呼び出しています。
もちろん、タイマーを1秒毎に呼び出して、1秒を刻むことはできます。しかし、処理に遅延が生じたとき、表示されない1秒が出てくることがあるのです。
タイマーは1/1000秒単位で時間を計測して、それを1秒単位になるように小数点以下を切り捨てて表示しています。通常であれば「0秒」の次は「1秒」になりますが、「0.999秒」から1秒後に「0.002秒」の遅延が発生すると「2.001秒」になり、これを1秒単位で表示していると「0秒」の次が「2秒」になります。
そのため、タイマーの表示誤差を0.5秒以内に納めるため、更新間隔を0.5秒にしているのです。

スクリプトは必ずフォームや表示位置の後ろに記述してください。

<span id="view_clock"></span>

<script type="text/javascript">
timerID = setInterval('clock()',500); //0.5秒毎にclock()を実行

function clock() {
	document.getElementById("view_clock").innerHTML = getNow();
}

function getNow() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth()+1; //１を足すこと
	var day = now.getDate();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();

	//出力用
	var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 
	return s;
}
</script>

応用 - 曜日の表示

曜日の表示を付け足してみましょう。

先ほどのユーザー関数getNowの後半を変更し、ユーザー関数getTodayとしました。
曜日は関数getDayで数値として取得できるので、0なら日曜日、6なら土曜日となります。配列変数youbiを利用しています。

<span id="view_today"></span>

<script type="text/javascript">
document.getElementById("view_today").innerHTML = getToday();

function getToday() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth()+1; //１を足すこと
	var day = now.getDate();
	var you = now.getDay(); //曜日(0～6=日～土)

	//曜日の選択肢
	var youbi = new Array("日","月","火","水","木","金","土");
	//出力用
	var s = year + "年" + mon + "月" + day + "日 (" + youbi[you] + ")";
	return s;
}
</script>

応用 - 英語表記

月名を外国語表記にしたい場合、上記の曜日の手順を応用して、配列変数から月名を引き出します。
そのため、月数である変数monの値には１を足さず、そのまま使うことに注意してください。これは配列変数では最初が0番になるからです。

<span id="view_todayE"></span>

<script type="text/javascript">
document.getElementById("view_todayE").innerHTML = getTodayE();

function getTodayE() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth(); //１足さない
	var day = now.getDate();
	var you = now.getDay(); //曜日(0～6=日～土)

	//曜日の選択肢
	var youbi = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
	//月名の選択肢
	var month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

	//出力用
	var s = month[mon] + " " + day + ", " + year + " (" +youbi[you] + ")";
	return s;
}
</script>

上記は米国式であり、英国式の場合は、「日付」「月名」「西暦」の順になります。また、日付は序数（1st, 2nd, 3rd, 4th...）で表します。

英国式の場合、出力前に下記の処理を追加します。

	//英国式
	if (day == 1) day = day + "st"; 
	else if (day == 2) day = day + "nd";
	else if (day == 3) day = day + "rd";
	else day = day + "th";

英国式の出力順は以下のようになります。

	var s = day + " " + month[mon] + ", " + year + " (" +youbi[you] + ")";

応用 - 仏語表記

フランス語表記では、英語表記とは曜日や日付を出力する順序が異なります。

<span id="view_todayF"></span>

<script type="text/javascript">
document.getElementById("view_todayF").innerHTML = getTodayF();

function getTodayF() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth(); //１足さない
	var day = now.getDate();
	var you = now.getDay(); //曜日(0～6=日～土)

	//曜日の選択肢
	var youbi = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samdi");
	//月名の選択肢
	var lune = new Array("janvier","f&#233;vrier","mars","avril","mai","juin","juillet","ao&#251;t","septembre","octobre","novembre","d&#233;cembre");

	//出力用
	var s = youbi[you] +" "+ day + " " + lune[mon] + ", " + year;
	return s;
}
</script>

戻る