業務でカウントダウン機能を作る機会があったので備忘録的に。
#完成物
##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だけに適用している。
書きなぐっただけなので、適宜わかりやすく書き直します....