17
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでカウントダウンを作る

Last updated at Posted at 2019-02-27

業務でカウントダウン機能を作る機会があったので備忘録的に。

#完成物

ダウンロード.gif

##html側の設定

index.html
<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        <p>東京オリンピックまであと</p>
        <div id="result"></div>
        <script src="countdown.js"></script>
    </body>
</html>

これだけ。
bodyの最後でjsを読み込んでいるのは、後述するが、getElementByIdでresultを読み込むため。

##JavaScript側の設定

countdown.js

var endDate = new Date('2020/07/24 00:00:00');
var interval = 1000;


function countdownTimer(){
  var nowDate = new Date();
  var period = endDate - nowDate ;
  var addZero = function(n){return('0'+n).slice(-2);}
  var addZeroDay = function(n){return('0'+n).slice(-3);}
  if(period >= 0) {
  var day = Math.floor(period / (1000 * 60 * 60 * 24));
  period -=  (day *(1000 * 60 * 60 * 24));
  var hour = Math.floor(period / (1000 * 60 * 60));
  period -= (hour *(1000 * 60 * 60));
  var minutes =  Math.floor(period / (1000 * 60));
  period -= (minutes * (1000 * 60));
  var second = Math.floor(period / 1000);
  var insert = "";
  insert += '<span class="h">' + addZeroDay(day) +'' + '</span>';
  insert += '<span class="h">' + addZero(hour) + ''+'</span>';
  insert +=  '<span class="m">' + addZero(minutes) +'' + '</span>';
  insert += '<span class="s">' + addZero(second)+ ''+ '</span>';
  document.getElementById('result').innerHTML = insert;
  setTimeout(countdownTimer,10);
  }
  else{
    var insert = "";
    var number = 0;
    insert += '<span class="h">' + number + number + '</span>';
    insert +=  '<span class="m">' + number + number + '</span>';
    insert += '<span class="s">' + number + number + '</span>';
    document.getElementById('result').innerHTML = insert;
  }
}

countdownTimer();

少し解説。

endDateに目標となる日付を与え、それをnowDateと引き算してあげることで目標の日付までの差分を出す。しかしこれだけじゃうまく日や時間、分などに別れていないため、それぞれ分けてあげる。

countdown.js
  var day = Math.floor(period / (1000 * 60 * 60 * 24));
  period -=  (day *(1000 * 60 * 60 * 24));
  var hour = Math.floor(period / (1000 * 60 * 60));
  period -= (hour *(1000 * 60 * 60));
  var minutes =  Math.floor(period / (1000 * 60));
  period -= (minutes * (1000 * 60));
  var second = Math.floor(period / 1000);

ここらへんは、periodをそれぞれの単位に合わせている。

countdown.js
var insert = "";
  insert += '<span class="h">' + addZeroDay(day) +'' + '</span>';
  insert += '<span class="h">' + addZero(hour) + ''+'</span>';
  insert +=  '<span class="m">' + addZero(minutes) +'' + '</span>';
  insert += '<span class="s">' + addZero(second)+ ''+ '</span>';
  document.getElementById('result').innerHTML = insert;

変数にそれぞれの単位を格納した後は、実際に表示させるためにinsertに入れていく。
spanにそれぞれの値を挟むことで、数字の装飾が出来るようになっている。

しかし、そのままの変数で表示しようとすると、1桁の数字の時にサイズが変わって、レイアウトが崩れてしまう。そこでaddZeroを使っている。

countdown.js
  var addZero = function(n){return('0'+n).slice(-2);}
  var addZeroDay = function(n){return('0'+n).slice(-3);}

addZeroDayは、addZeroだけだと3桁の表示の時にレイアウトが崩れてしまうと思ったので、3桁を表示することがあるdayだけに適用している。

書きなぐっただけなので、適宜わかりやすく書き直します....

17
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?