期間を計算するJavaScript入門

  1. HOME
  2. JavaScript入門
  3. 期間を計算する

ここでは、任意の時まであと何日か計算する方法を見てみたいと思います。 イベントページなどでよく「開催日まであと○○日」といったカウントダウンの表示を見かけますが、 JavaScriptを使うと自動で計算して表示してくれます。

来年まであと何日か計算する

では、以下のスクリプトをHTMLのBODY内に記入してみてください。

<script>

//今日の日付データを作成する
var today = new Date();
var year1 = today.getFullYear();

//来年1月1日の日付データを作成する
var year2 = year1+1;
var newYear= new Date(year2+"/1/1");

//来年1月1日-今日のミリ秒を計算し、日にちに換算する
var day = Math.ceil((newYear-today)/(60*60*24*1000));

//表示
document.write("来年まであと"+day+"日です。");

</script>

サンプルの表示結果=

2つの日付データを作成する

では、上記のスクリプトを見ていきましょう。 最初に現在の日付データをnew Date()で作成します。 そして、今年は何年かgetFullYear()を使って取得し、変数year1に代入します。

次に来年1月1日の日付データを作成します。 まず来年が何年になるか、year1+1で求めます (今2013年なら、変数year2には2014が代入されます)。

続いて、来年の日付データを作成します。 new Date()の括弧内任意の日時を記入すると、 その日の日付データが作成できます。 記入方法は以下の通りです。

new Date("年/月/日 時:分:秒")
任意の日付データを作成します。(時間指定も可能です)。

期間を計算する

2つの日付データが出来た所で、その両者の差を求めます。 日付データ同士を計算すると、結果はミリ秒で出ます。 ということで、それを日にちに換算します。そして出た値を切上げして表示します (残り10分になったとしてもまだ新年になった訳では無いので、 1日と表示する為に切り上げとなります)。

最後に、document.write()で書き出します。

日付データの正体

さて、日付データ同士の差を求めると、なぜミリ秒単位で表示されるのでしょうか? 実を言うと、日付データというのは1970年1月1日0時0分0秒から何ミリ秒経過しているかを表す数値なのです。 数値ですから、色々と計算するのに便利です。

1970年1月1日より前でも計算可能です。 ご自分の生まれた日から何日経過しているか計算してみたりされるのも楽しいかも知れません。 是非日付データを駆使して、面白いスクリプトを組んでみてください。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers