2020東京オリンピックカウントダウン/netkansai

2020東京オリンピックカウントダウン

2017/05/29

TOKYO OLYMPIC 2020

まだまだ先だと思っているとあっという間にやってくるのでカウントダウンをJavaScriptで作ってみました。JavaScriptのDateオブジェクトを使用します。オブジェクトなのでnewでインスタンスを作成します。

<script>
  const ndt=new Date();
</script>

ndtが作成されました。Date()と（）の中に何もいれませんでしたのでndtはnewした時点の日時になっています。

<script>
  const ndt=new Date();                            // 今日
  const tokyo_olympic=new Date(2020,7,24,0,0,0);　　// 東京オリンピック 2020年7月24日開催
</script>

これで東京2020オリンピック開幕日と今日の2つ日付のオブジェクトが作成されました。もちろんご存知かと思いますが、JavaScriptは実行しているマシンの時間を見ていますのでPCやスマホの時間が狂っているとおかしな結果になってしまいます。また、世界協定時間（標準時？）との時差もあるのでローカルタイムとの差を考慮しなくてはいけませんが、オリンピックという世界的行事なので一律9時間引くのもアレだし、真剣に考えるとよくわからなくなってしまいそうなのでこの辺のことは各自でアレしてください。オリンピックの開幕も午後8時指定なので余計に大変になってきます。

いったん、これらのオブジェクトを表示してみます。

今日

開催日

ちょっと、ごつごつした感じですね。これらから、月だけを取得するとか分だけを取得するとかにはちょっと工夫が必要です。西暦を取得してみます。

<script>
  const ndt=new Date();
  console.log(ndt.getFullYear());        // 2017
</script>

このようにすれば西暦の2017が取得できます。このgetFullYearメソッド以外にもいくつもメソッド種類があります、代表的なものを少し上げておきます。

getFullYear   4桁の西暦
getMonth   月。月は0から11までの数値なので1を加算する事で実際の月に対応します。
getDate   日。
getDay   曜日。曜日も0から6までの数値で日曜から土曜を表します。配列に和暦の曜日を入れておくことで和暦の曜日表示が可能です。
getHours   時。
getMinutes   分。
getSeconds()   秒。

詳しくはMDNのDateをご覧ください。

次にオリンピック開催日までの日数の計算ですが、上記の方法で年と月と日を引っ張り出して年に365かけて月に30かけて残りの日付を足せば計算できそうですが、うるう年もあれば大の月小の月も考慮に入れないといけないのでめちゃ大変になりそうです。

MDNのDateに

Date オブジェクトは、1970 年 1 月 1 日 (UTC) から始まるミリ秒単位の時刻値を基準としています。

1000分の1秒の単位で1970年の1月1日始まりの数値を持っていますのでオリンピック開催日から今日の秒を引いて（1000　×　60　×　60　×　24）という1日をミリ秒であらわしたもので割ってあげればあと何日が計算できます。割り算の端数は切り捨てておきます。

getTime()メソッドを使うとDate.prototype.getTime()にあるように

戻り値

数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。

これを利用してオリンピックの開催日と今日の日付の7970年1月1日からのミリ秒を取得してその差をまた、ミリ秒から1日単に戻してあげればできそうです。

<script>
  const ndt=new Date();                            // 今日
  const tokyo_olympic=new Date(2020,7,24,0,0,0);  // 東京オリンピック 2020年7月24日開催
  const elapsed=Math.floor(
    (tokyo_olympic.getTime() - ndt.getTime()) / (1000 * 60 * 60 *24)
  );
  console.log(elapsed);
</script>

ではこれを表示してみます。

上の日数と一致してますか？緑の数値と違ういますね。30日もずれています。困ったことが起きました。tokyo_olympicについてgetFullYear して、getMonthしてgetDateしても、ntdに対してgetFullYear して、getMonthしてgetDateしてもも特におかしなことはありません。

今日：

オリンピック開催日：

今日の月が1か月少ないのは、上述のとおり月は0から11までの数値なので1を加算する事で実際の月に対応します。ということなのでおかしくはないのですが、どうやらこれが原因で30日ほどずれるようです。

いったん仮のDateオブジェクトを作成し、そこから具体的な今日の年月日を取得し（もちろん月は1加算する）新しいDateオブジェクトを作成します。この新しいオブジェクトとオリンピック開催日を比較（差を取って）して日付に直してあげればうまくいきそうです。

HTML

<p id="olympic">TOKYO OLYMPIC 2020</p>
<script type="text/javascript">
  tokyoOlympic();
</script>

JavaScript

function tokyoOlympic(){
  /* 東京オリンピック 2020年7月24日開催 */
  const tokyo_olympic=new Date(2020,7,24,0,0,0);
  const t1=new Date();
  const today=new Date(t1.getFullYear(),t1.getMonth()+1,t1.getDate());
  const elapsed= Math.floor((tokyo_olympic.getTime()-today.getTime())/(1000 * 60 * 60 * 24));
  if (elapsed>0){
    const remain="東京オリンピックまであと" +elapsed +"日";
    document.getElementById('olympic').innerHTML = remain;
  }
}

こんな感じでいかがでしょうか。

実は、http://tokyo-olympics-2020.com/に公式？のカウントダウンがあります。ここもJavaScriptで作られています。http://tokyo-olympics-2020.com/timertokyojp.jsにスクリプトが書かれています。setIntervalで1秒ごとにカウントダウンするようになっています。さらに上記の1か月ずれを

Math.floor(Date.UTC(2020, 6 , 24 ,20,0,0)/1000);

のようにオリンピック開催日を1か月早く設定してます。まあ、短いものなので使いまわさないでしょうし、カウントダウンの需要もないでしょうから、ありかもしれませんね。