14
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

完成物

ダウンロード.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だけに適用している。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
14
Help us understand the problem. What are the problem?