JavaScript

スポンサー広告

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か月早く設定してます。まあ、短いものなので使いまわさないでしょうし、カウントダウンの需要もないでしょうから、ありかもしれませんね。

 

rssfeed
コメント
2017年11月23日 07時02分
ijasesuric さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 07時05分
igowacenu さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 07時15分
exixedu さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 13時52分
tmexuriphiv さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 14時04分
efogekovugar さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 17時14分
qujakoliwe さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月23日 17時26分
elivihubuari さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月24日 02時44分
eetaqin さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年11月24日 02時57分
evibumauwejaa さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2018年01月31日 15時30分
eqasusen さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月31日 15時35分
ibedokm さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月31日 15時46分
ovuslepeguo さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月31日 15時52分
ixuoyuheboti さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月31日 21時46分
ukerupet さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月31日 22時02分
wexepikooxiq さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年10月23日 07時28分
スーパーコピー時計 さん
お客さんたちも大好評です:
新品種類がそろっています。
品質を最大限本物と同等とする為に相応の材質にて製作している為です.
経営方針: 品質を重視、納期も厳守、信用第一!
2019年03月27日 21時56分
prescription without a doctor's prescription さん
<a href="http://canadianpharmacyxyz.com/">online pharmacies canada</a>
http://canadianpharmacyxyz.com/
<a href=http://canadianpharmacyxyz.com/>international pharmacies that ship to the usa</a>
2019年09月10日 06時38分
シャネルスーパーコピー さん
ネット通販ショップ

ブランドコピー品の大SALE--ネット通販ショップ

当店はブランドコピーのスーパーコピー品通販専門店です。
商品は全てよい材料と優れた品質で作ります!
ヴィトンスーパーコピー、シャネルコピー、
スーパーコピーバッグ、ブランド財布 コピー、
時計スーパーコピーなど人気ブランド品が豊富に取り揃えています。
品質保証&届け保証します!
どうぞご安心にご利用ください。
2019年09月30日 10時30分
スーパーコピーブランド さん
商品説明を読んで、自分なりに想像していたよりずっと美品でした。
お店の商品程度ランク付けが、かなり厳しいのだなと思いました。
購入する側の立場に立ったお店だと思います。
[url=https://www.ginzaok.com/wallet/prodetail_id_8287.html]スーパーコピーブランド[/url]
2019年10月02日 03時53分
スーパーコピー品 さん
入金後すぐに発送して頂き、翌日には手元に届きました。丁寧に梱包されていて、手書きのメッセージまでついていてとても好感がもてました。ありがとぅございました。また機会があればお願いします。
スーパーコピー品 https://www.kopi6.co/product/product-13651.html
2019年10月20日 05時58分
腕時計コピー さん
腕時計☆財布 専売店

2019年男性、女性に超人気がある新素材入荷
2019年 新品 バッグ、財布、手帳、腕時計
ブランド腕時計、雑貨、小物、クロエなどの最新作!
●在庫情報随時更新!
●A/S/N品質 シリアル付きも有り付属品完備!
●不良品物情況、無償で交換します.
全商品送料無料 好評実施中
以上 宜しくお願い致します。

当社URL:
2019年11月08日 16時57分
cppovvlnwa さん
lZVTkQ <a href="http://jtphjdsqqtiy.com/">jtphjdsqqtiy</a>, [url=http://ujbrlogxgqgv.com/]ujbrlogxgqgv[/url], [link=http://jrvtoogvdyqf.com/]jrvtoogvdyqf[/link], http://nskfgcijkiay.com/
2019年11月09日 03時12分
aiaive さん
vyAxx1 <a href="http://qnzzdivcgylh.com/">qnzzdivcgylh</a>, [url=http://nswlhailnhko.com/]nswlhailnhko[/url], [link=http://nrrivudgyirx.com/]nrrivudgyirx[/link], http://syzlqbvpfpzq.com/
2019年12月10日 14時37分
kZlM さん
7827
2019年12月10日 14時37分
kZlM さん
...),.',")
2019年12月10日 14時37分
kZlM さん
'nQvoTQ<'">wJBSUT
2019年12月10日 14時37分
kZlM さん
) AND 5537=9912 AND (7229=7229
2019年12月10日 14時37分
kZlM さん
) AND 3829=3829 AND (2715=2715
2019年12月10日 14時37分
kZlM さん
AND 2893=5319
2019年12月10日 14時37分
kZlM さん
AND 3829=3829
2019年12月10日 14時37分
kZlM さん
') AND 7662=5501 AND ('CpUS'='CpUS
2019年12月10日 14時37分
kZlM さん
') AND 3829=3829 AND ('CmBn'='CmBn
2019年12月10日 14時37分
kZlM さん
' AND 4910=7803 AND 'tmBu'='tmBu
2019年12月10日 14時37分
kZlM さん
' AND 3829=3829 AND 'ERVp'='ERVp
2019年12月10日 14時37分
kZlM さん
AND 5170=8633-- qymf
2019年12月10日 14時37分
kZlM さん
AND 3829=3829-- JZWb
2019年12月10日 14時37分
kZlM さん
(SELECT (CASE WHEN (1793=3422) THEN '' ELSE (SELECT 3422 UNION SELECT 5477) END))
2019年12月10日 14時37分
kZlM さん
(SELECT (CASE WHEN (2037=2037) THEN '' ELSE (SELECT 7948 UNION SELECT 8647) END))

コメントよろしくお願いします。

お名前
コメント