@ JavaScript

Date():日時の取得

JavaScript では、new 演算子と Date() コンストラクタで Date オブジェクトを生成します。

Date オブジェクトのメッソドを使用すれば、さまざまな日付と時刻の取得と設定ができます。

JavaScript での日付は 1970 年 1 月 1 日 00:00:00(UTC)からのミリ秒を表す数値で表現されています。有効な日付の範囲は 1970 年 1 月 1 日 の前後 1 億日となっています。

Date オブジェクトのインスタンスを生成する書式は以下の通りです。

format

new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
Date コンストラクタのパラメータ
引数 意味
dataString 日付を表す文字列
milliseconds 1970年1月1日00:00:00(UTC) からのミリ秒を表す数値
year 4桁の西暦を表す数字
month 0 から 11 までの整数値
date 日付を表す整数値
hour 時間を表す整数値

地方時

地方時は、JavaScript が実行される場所での時間です。

地方時での日付、時刻を取得・設定するメソッドは以下の通りです。get で始まるメソッドは情報を取得し、set で始まるメソッドは日付情報を設定するメソッドです。

地方時のコンストラクタ
メソッド名 日付情報
getFullYear / setFullYear 年(西暦)
getMonth / setMonth
getDate / setDate
getDay / setDay 曜日(0=日曜、1=月曜、2=火曜、・・・)
getHours / setHours
getMinutes / setMinutes
getSeconds / setSeconds

世界時

世界時は、世界共通の標準時(グリニッジ標準時と同等)です。

世界標準時(UTC)で日付、時刻を取得するメソッドも存在します。UTC 用のメソッドは「getUTCFullYear」のように地方時でのメソッド名に UTC をつけたものです。

Date オブジェクトのメソッドを利用した日付と時刻の取得例を以下に示します。

datetime.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<style>
html {
  height: 100%;
}
body {
  min-height: 100%;
  color: #afaf61;
  background-color: #cc9;
}
div {
  font-size: 3rem;
  font-weight: bold;
  line-height: 3rem;
  padding-top: 40px;
  padding-left: 40px;
}
</style>
<script>
function clock() {
  var myDay = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
  var now =   new Date();
  var year =  now.getFullYear();
  var month = now.getMonth() + 1;
  var date =  now.getDate();
  var day =   now.getDay();
  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;
  }

  var digitalClock = year + '<br>' + month + '/' + date + '(' + myDay[day] + ')<br>' + hour + ':' + min + ':' + sec;

  document.getElementById('displayArea').innerHTML = digitalClock.toLocaleString();

  window.setTimeout("clock()", 1000);
}

window.onload = clock;
</script>
</head>

<body>
  <div id="displayArea"></div>
</body>

</html>

demo