JavaScript

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だけに適用している。

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