js カウントダウンタイマーのmsの挙動がおかしい？

Question

お世話になっております。
3段階のカウントダウンタイマーを作成しています。
ほぼネットで探したコードですが、ミリ秒を追加したいと思って追加しましたが挙動がおかしいです。
どうしたらよろしいでしょうか？

何卒よろしくお願いいたしますm(__)m

<div class="timer" id="timer"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var Timer = function(saleStartTime, saleEndTime, endMessage, outputDestination) {
    this.saleStartTime = saleStartTime;
    this.saleEndTime = saleEndTime;
    this.endMessage = endMessage;
    this.outputDestination = outputDestination;
  };
  Timer.prototype.countDown = function() {
    var saleStartTime = new Date(this.saleStartTime);
    var saleEndTime = new Date(this.saleEndTime);
    var oneDay = 24 * 60 * 60 * 1000;
    var countDownTimer = document.getElementById(this.outputDestination);
    var endMessage = this.endMessage;
    var currentTimeCD = new Date();
    var untilStartTime = new Date();
    var untilFinishTime = new Date();
    var d = 0;
    var h = 0;
    var m = 0;
    var s = 0;
    var ms = 0;
    setInterval(calculateTime, 100);

    function calculateTime() {
      currentTimeCD = new Date();
      untilStartTime = saleStartTime - currentTimeCD;
      untilFinishTime = saleEndTime - currentTimeCD;
      if (currentTimeCD < saleStartTime) {
        d = Math.floor(untilStartTime / oneDay);
        h = Math.floor((untilStartTime % oneDay) / (60 * 60 * 1000));
        m = Math.floor((untilStartTime % oneDay) / (60 * 1000)) % 60;
        s = Math.floor((untilStartTime % oneDay) / 1000) % 60 % 60;
        ms = (untilStartTime % 1000) % 60;
      } else {
        d = Math.floor(untilFinishTime / oneDay);
        h = Math.floor((untilFinishTime % oneDay) / (60 * 60 * 1000));
        m = Math.floor((untilFinishTime % oneDay) / (60 * 1000)) % 60;
        s = Math.floor((untilFinishTime % oneDay) / 1000) % 60 % 60;
        ms = (untilFinishTime % 1000) % 60;
      }
      showTime();
    }
    function showTime() {
      if (currentTimeCD < saleStartTime) {
        countDownTimer.innerHTML
        = '公開まで' + d + '日' + h + '時間' + m + '分' + s + '秒' + ms;
      } else if (currentTimeCD >= saleStartTime && currentTimeCD <= saleEndTime) {
        countDownTimer.innerHTML
        = '公開終了まで' + d + '日' + h + '時間' + m + '分' + s + '秒' + ms;
      } else {
        countDownTimer.innerHTML = endMessage;
      }
    }
  }
  var myTimer = new Timer('2021/11/05 12:06' , '2021/11/05 15:07', '次回乞うご期待！', 'timer');
  myTimer.countDown();
}, false)


</script>

Comments

[m.ts10806]

「おかしい」「うまくいかない」などで他者に伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

[wing283]

ご指摘いただきありがとうございます。
ミリ秒のところがカクカクしていてスムーズにいきません。
なんて言ったらいいかわかりません。語彙力が足りずすみません。

[m.ts10806]

質問は編集できますので。

Answer 1

どうしたいかよくわかりませんが例えばこんな感じ

<script>
document.addEventListener('DOMContentLoaded', function() {
  const t0=60*60*1000;
  const t1=new Date().getTime();
  setInterval(()=>{
    const t2=new Date().getTime();
    const t3=t0+t1-t2;
    const h=(parseInt(t3/60/1000)).toString().padStart(2,'0');
    const m=(parseInt(t3/1000)%60).toString().padStart(2,'0');
    const ms=(parseInt(t3/10)%100).toString().padStart(2,'0');
    timer.textContent=`${h}:${m}.${ms}`;
  },10);
});
</script>
<div class="timer" id="timer"></div>

Comments

[wing283]

いつもありがとうございます。
const ms=(parseInt(t3/10)%100).toString().padStart(2,'0');
ところですが、ヒントを得た気がします。
もうちょい頑張ってみますm(__)m