リアルタイムで日付表示

日付をリアルタイムで表示する Javascript です。
日付が変わるのは１日１回なので、リアルタイムで表示する必要がないこともありますが、日付をまたいで利用するユーザーがいると想定される場合は、リアルタイムで表示を更新したくなります。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示</title>
<script type="text/javascript"><!--
function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = hiduke.getMonth()+1;
	var week = hiduke.getDay();
	var day = hiduke.getDate();
	var yobi= new Array("日","月","火","水","木","金","土");
	var msg = year + "年" + month + "月" + day + "日（" + yobi[week] + "）";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>

年月日と曜日を取得します。
曜日は、数字で返ってくるので、文字に変換します。
表示する文字列を作成し、id="rtDate" に表示します。
リアルタイムで表示を更新するために、setInterval() で１秒ごとに showDate() を実行しています。

JavaScript なので、ローカルのパソコンの日付設定を取得しています。
パソコンの日付設定が狂っていると、そのまま表示します。

表示桁数を２桁に固定して、2000年1月5日を 2000年01月05日と表示した方が見やすいかもしれません。。
曜日ごとに表示色を変えるなども考えられます。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = set2figures(hiduke.getMonth()+1);
	var week = hiduke.getDay();
	var day = set2figures(hiduke.getDate());
	var yobi= new Array("<font color='#ff0000'>日</font>",
	"月","火","水","木","金","<font color='#0000ff'>土</font>");

	var msg = year + "年" + month + "月" + day + "日（" + yobi[week] + "）";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>

このサンプルはテキスト表示なので、数字の画像を作って、日めくりカレンダー的な表示にもできます。
月単位のカレンダー形式にするのであれば、JavaScript ではなく、サーバー側で作った方がいい場合もあります。

リアルタイムで日付表示

関連する記事