カウントダウンタイマーの数字を一桁ずつ調節したい

Question

前提・実現したいこと

javascriptでカウントダウンタイマーを作っていて、カウントダウンの処理は書けたのですが、
カウントダウンしている数字に個別のスタイルをあてることになり、修正に困っています。
3桁以上の表示はせず、日、時、分の2桁の数字それぞれにスタイルを当てたいので、ver day,hour,min,の処理を十の位と一の位に分割する必要があり、分けるとなるとカウントダウンが1桁時の0の扱いなど、どうすれば良いかわからないので、お助けください。よろしくお願いいたします。

該当のソースコード

// ▼参考 https://gist.github.com/zakihiro/5c1ac366feed5c1e1c8567289860acd7
function CountdownTimer(elm, tl, mes) {
  this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
  initialize: function (elm, tl, mes) {
    this.elem = document.getElementById(elm);
    this.tl = tl;
    this.mes = mes;
  },
  countDown: function () {
    var timer = '';
    var today = new Date();
    var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
    var hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
    var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
    var me = this;

    if ((this.tl - today) > 0) {
      if (hour) timer += '<span class="cdt_num">' + hour + '</span><small>時間</small>';
      timer += '<span class="cdt_num">' + this.addZero(min) + '</span><small>分</small><span class="cdt_num">' + this.addZero(sec) + '</span><small>秒</small><span class="cdt_num">' + this.addZero(milli) + '</span>';
      this.elem.innerHTML = timer;
      tid = setTimeout(function () {
        me.countDown();
      }, 10);
    } else {
      this.elem.innerHTML = this.mes;
      return;
    }
  },
  addZero: function (num) {
    return ('0' + num).slice(-2);
  }
}

// ▼ 開始＆終了日時の指定と日付の判別
function CDT() {
  var myD = Date.now(); // 1970/1/1午前0時から現在までのミリ秒
  var start = new Date('2018-11-05T00:00+09:00'); // 開始日時の指定
  var myS = start.getTime(); // 1970/1/1午前0時からの開始日時までのミリ秒
  var end = new Date('2019-11-05T23:59+09:00'); // 終了日時の指定
  var myE = end.getTime(); // 1970/1/1午前0時から終了日時までのミリ秒

  // 今日が開始日前か期間中か終了日後かの判別
  if (myS <= myD && myE >= myD) {
    var text = '<span>終了</span><span>まで</span>';
    var tl = end;
  } // 期間中
  else if (myS > myD) {
    var text = '<span>開催</span><span>まで</span>';
    var tl = start;
  } // 開始日前
  else {
    var text = "";
  } // 終了日後

  var timer = new CountdownTimer('cdt_date', tl, '<small>終了しました</small>'); // 終了日後のテキスト
  timer.countDown();
  target = document.getElementById("cdt_txt");
  target.innerHTML = text;
}
window.onload = function () {
  CDT();
}

困っていること

現状のコードだと、DD日HH時間MM分SS秒とカウントが進んでいくのですが、例えばDDの2桁目と1桁目の間隔を空けたい場合、出力の仕方が

var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));

と2桁丸ごと出力する記述なので、個別にスタイルを当てることができません。

var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
var hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;

この部分を
var day1〜〜
var day2〜〜
var hour1〜〜
var hour2〜〜
のように桁ごとに別々に出力する方法がありましたらご教示お願いいたします。

Comments

[y_waiwai]

現状のコードではどういう不具合があって、それをどういうふうにしたいというはなしでしょうか。
問題が見えません

Answer 1

day%10 でひとけた目が出ます
(day/10)%10 で二桁めが出ます

Comments

[3TAKKUN]

度々すみません。
const day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
const day1 = (Math.floor((this.tl - today) / (24 * 60 * 60 * 1000)) % 10);
const day2 = (Math.floor((this.tl - today) / (24 * 60 * 60 * 1000)) / 10) % 10;
とするとday1が一桁目が取れていて、day2は小数点が出てしまいます。

初歩的な書き方ができていないと思うのですが、2桁目の書き方をご教示いただけますでしょうか？
お手数ですが、お願いいたします。

[y_waiwai]

const day2 = Math.floor(((this.tl - today) / (24 * 60 * 60 * 1000)) / 10) % 10;

としてみては

[3TAKKUN]

ありがとうございます！
確認できました。

この後、カウントダウンの数字を画像で当てることになっていて、classを動的に変える必要があるのですが、今のコードのif文では対応できないでしょうか？

質問の範囲外なので可能であればで問題ございません。
ベストアンサーにさせていたきます、ありがとうございました。