1時間（60分）のカウントダウンタイマーを表示させたい

Question

標題のとおりです。
下記サイトのようなカウントダウンタイマーを実装したいと考えております。

■実装参考サイト
https://shop.diana-inc.co.jp/lp?u=EB_WMC1_CER_GLB_2980&gclid=Cj0KCQjw3f6HBhDHARIsAD_i3D9BbRQTZE8tSrNyV9Jex5rMsC2x1af9CqVOWfTQOp9o5soy8M-5wFMaAlfOEALw_wcB

つきましては、自分で調べてみて下記サイトを参考に実装してみました。
■参考サイト
https://hakase-labo.com/count_down/

説明の通りにし、ミリ秒までの表示はできたのですがカウントダウンが始まるのを常に59分59秒○○ミリ秒といった具合に設定したいです。

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 hou=Math.floor(((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 mil=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
  var me=this;

  if( ( this.tl - today ) > 0 ){
   if (hou) timer += '<span class="hou">'+hou+'</span><span class="moji">時間</span>';
   timer += '<span class="min">'+this.addZero(min)+'</span><span class="moji">分</span><span class="sec">'+this.addZero(sec)+'</span><span class="moji">秒</span><span class="mil">'+this.addZero(mil)+'</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 countdown(){
 var tl = new Date('2025/07/04 00:00:00');
 //この上の部分で終了時間を設定するYO！
 var timer = new CountdownTimer('countdown',tl,'終了しました');
 //この上の文は終了した後に表示する文字!
 timer.countDown();
}
window.onload=function(){
 countdown();
}

自分で行ったのは日にちはいらないので削除した程度です。
JavaScript初心者のため他の同じような質問も見たのですが、分からず改めてこちらにご質問させていただきました。
どなたかご教授いただけますと大変ありがたいです。

何卒よろしくお願い致します。

Answer 1

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

Comments

[tantalus]

ご回答頂きまして大変有り難うございます！
とても助かります！こちら早速試してみまして無事にうまくいきました！
コードも記述していただきましてありがとうございます！

Answer 2

普通に拝借すればいいのではないでしょうか？

https://jsfiddle.net/0kupdr6j/

<div class="target"></div>

const countdown_timer = function(){
    let mins = 30; // ここを変えれば指定の minutes にできます
    let secs = mins * 60;
    let msecs = secs * 1000;
    let start_date = new Date();
    let end_date = new Date(start_date.getTime() + msecs);
    let current_mins = 0;
    let current_secs = 0;
    let current_msecs = 0;

    $('.target').append(
      '<div class="countdown_timer">'
      + '<p class="time">あと<span class="mins">'+mins+'</span>分<span class="secs">00</span>秒<span class="msecs">00</span></p>'
      + '</div>'
    );
    
    if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
      $('.text_attention').html('※このページが表示されてから、<br>60分間の限定割引になります。');
    }
  
    let timer = setInterval(function(){
      let now_date = new Date();

      current_mins = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
      current_secs = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
      current_msecs = Math.floor(((end_date - now_date) % (24 * 60 * 60 * 1000)) / 10) % 100;
  
      if(current_mins <= 9) {
        current_mins = "0" + current_mins;
      }
      if(current_secs <= 9) {
        current_secs = "0" + current_secs;
      }
      if(current_msecs <= 9){
        current_msecs = "0" + current_msecs;
      }
  
      $(".time").html(
        'あと'
        + '<span class="font_size_xl">' + current_mins + '</span>'
        + '分'
        + '<span class="font_size_xl">' + current_secs + '</span>'
        + '秒'
        + '<span class="font_size_xl">' + current_msecs + '</span>'
      );
    },10);
}

countdown_timer();

Comments

[tantalus]

ご回答頂きましてありがとうございます！
こちら実装参考サイトにあるコードになるんですかね？？
こういうのってコードの拝借などしても問題ないのでしょうか？
あまりそのへんが詳しくなくて、無知で恐れ入ります。。。