現在の日時をリアルタイムで取得(ローカル時間)

現在の日時を取得(ローカル時間)」と同様に日時を取得するには、Dateオブジェクトを使用しますが、リアルタイムに日付を取得する場合は、これに加えsetTimeout関数を使用します。

デモ

 

functionの定義とHTMLの準備

JavaScript

var realTimeDatetimeDisplay = function() {
	var dateObj        = new Date(),
	    dateYear       = dateObj.getFullYear(),
	    dateMonth      = dateObj.getMonth() + 1,
	    dateDay        = dateObj.getDate(),
	    dateWeek       = dateObj.getDay(),
	    timeHour       = dateObj.getHours(),
	    timeMinutes    = dateObj.getMinutes(),
	    timeSeconds    = dateObj.getSeconds(),
	    weekNames      = ['日', '月', '火', '水', '木', '金', '土'],
	    displayElement = document.getElementById('real-clockbox'),
	    str            = '';

	// 一桁の場合は0を追加
	if (timeHour < 10)    timeHour    = '0' + timeHour;
	if (timeMinutes < 10) timeMinutes = '0' + timeMinutes;
	if (timeSeconds < 10) timeSeconds = '0' + timeSeconds;

	// 文字列の結合
	str  = dateYear + '年' + dateMonth + '月' + dateDay + '日' + '(' + weekNames[dateWeek] + ') ';
	str += timeHour + '時' + timeMinutes + '分' + timeSeconds + '秒';

	// 出力
	if (displayElement) displayElement.innerHTML = str;

	// 繰り返し実行
	setTimeout(realTimeDatetimeDisplay, 1000);
};

HTML

<div id="real-clockbox">&nbsp;</div>

使い方

JavaScript

realTimeDatetimeDisplay();

JavaScript逆引きリファレンス一覧へ戻る