01js-countdown-timer.js

const el_time = document.getElementById('time');

const countdown = new countDownTimer({
  element: el_time,  //カウントダウンを表示する要素
  str_date: '2100-01-02T12:00:00',  //カウントダウン目標の時刻　{YYYY}-{MM}-{DD}T{hh}:{mm}:{ss}
  is_d: true,  //bool 日を表示するか否か
  is_h: true,  //bool 時間を表示するか否か
  is_m: true,  //bool 分を表示するか否か
  is_s: true,  //bool 秒を表示するか否か
  is_ms: false,  //bool ミリ秒を表示するか否か
  digit: 1,  //int 各数値の桁数　通常1か2
  funcOnEnd: func //function カウントダウンが終了した際に呼び出される関数
});

function func(){
  console.log('func');
}

02js-countdown-timer.html

<p>time1：残り<span id="time1" class="time"></span></p>
<p>time2：残り<span id="time2" class="time"></span></p>
<p>time3：残り<span id="time3" class="time"></span></p>
<div class="area-bt">
  <button id="bt-stop3" class="bt-common">time3をストップ</button>
  <button id="bt-submit3" class="bt-common">time3に残り10秒をセット</button>
</div>

03js-countdown-timer.js

const el_time1 = document.getElementById('time1');

const countdown1 = new countDownTimer({
  element: el_time1,
  str_date: '2100-01-02T12:00:00',
  is_d: true,
  is_h: true,
  is_m: true,
  is_s: true,
  is_ms: false,
  digit: 1
});
//-------------------------------------------
const el_time2 = document.getElementById('time2');
//デモ用に明日の同時刻を取得
const date2 = new Date();
date2.setDate(date2.getDate()+1);
const str_date2 = 
  `${date2.getFullYear()}-${fixDigit(date2.getMonth()+1,2)}-${fixDigit(date2.getDate(),2)}`+
  `T${fixDigit(date2.getHours(),2)}:${fixDigit(date2.getMinutes(),2)}:${fixDigit(date2.getSeconds(),2)}`;
//
const countdown2 = new countDownTimer({
  element: el_time2,
  str_date: str_date2,
  is_d: false,
  is_h: true,
  is_m: true,
  is_s: true,
  is_ms: true,
  digit: 2
});

function fixDigit(num,digit){
  const diff = digit - String(num).length;
  if(diff>0) return '0'.repeat(diff)+num;
  return num;
}
//-------------------------------------------
const el_time3 = document.getElementById('time3');
let countdown3;
demo3();

function demo3(){
  //デモ用に30秒後の時刻を取得
  const date3 = new Date();
  date3.setSeconds(date3.getSeconds()+10);
  const str_date3 = 
    `${date3.getFullYear()}-${fixDigit(date3.getMonth()+1,2)}-${fixDigit(date3.getDate(),2)}`+
    `T${fixDigit(date3.getHours(),2)}:${fixDigit(date3.getMinutes(),2)}:${fixDigit(date3.getSeconds(),2)}`;
  //
  countdown3 = new countDownTimer({
    element: el_time3,
    str_date: str_date3,
    is_d: false,
    is_h: false,
    is_m: true,
    is_s: true,
    is_ms: true,
    digit: 2,
    funcOnEnd: funcEnd
  });
}

function funcEnd(){
  el_time3.textContent = '終了';
}

document.getElementById('bt-stop3').addEventListener('click',()=>{
  countdown3.destroy();
});
document.getElementById('bt-submit3').addEventListener('click',()=>{
  countdown3.destroy();
  demo3();
});

count-down-timer.js

/*!
 * count-down-timer.js v1.0
 *
 * Copyright (c) 2023 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
class countDownTimer{
  #timer;
  #funcOnEnd
  constructor(args){
    //例外処理
    if(args===undefined){
      console.warn('Argument is required.')
      return;
    }
    if(typeof args !== 'object'){
      console.warn('Argument is invalid.')
      return;
    }
    if(args.element===undefined||args.element===null||!args.element instanceof HTMLElement){
      console.warn('Set element.')
      return;
    }
    //引数取得
    const str_date = args.str_date;
    const digit_max = (()=>{
      let temp = args.digit;
      if(!Number.isInteger(temp)) return 2;
      if(temp<1) return 1;
      return temp;
    })();
    this.#funcOnEnd = args.funcOnEnd;
    //タイマー処理
    const date_now = new Date();
    const time_now = date_now.getTime();
    const date_end = (str_date!==undefined) ? new Date(args.str_date) : new Date();
    const time_end = date_end.getTime();
    const timer_unit = (args.is_ms) ? 10 : 1000;
    let remain_ms = time_end - time_now;
    if(remain_ms<=0){
      this.#onEnd();
      return;
    }
    this.#timer = setInterval(()=>{
      let str_output = '';
      let remain = remain_ms;
      if(args.is_d){
        const remain_d = Math.floor(remain/(1000*60*60*24))
        const str_d = this.#fixDigit(remain_d, digit_max);
        str_output += str_d + '日';
      }
      remain = remain % (1000*60*60*24);
      if(args.is_h){
        const remain_h = Math.floor(remain/(1000*60*60))
        const str_h = this.#fixDigit(remain_h, digit_max);
        str_output += str_h + '時間';
      }
      remain = remain % (1000*60*60);
      if(args.is_m){
        const remain_m = Math.floor(remain/(1000*60))
        const str_m = this.#fixDigit(remain_m, digit_max);
        str_output += str_m + '分';
      }
      remain = remain % (1000*60);
      if(args.is_s){
        const remain_s = Math.floor(remain/1000)
        const str_s = this.#fixDigit(remain_s, digit_max);
        str_output += str_s;
      }
      remain = remain % 1000;
      if(args.is_s&&args.is_ms){
        const remain_ms = Math.floor(remain/10);
        const str_ms = this.#fixDigit(remain_ms, digit_max);
        str_output += '.'+str_ms;
      }
      str_output += '秒';
      //
      args.element.textContent = str_output;
      remain_ms -= timer_unit;
      if(remain_ms<0){
        clearInterval(this.#timer);
        this.#onEnd();
      }
    },timer_unit);
  }

  destroy(){
    clearInterval(this.#timer);
  }

  #onEnd(){
    if(typeof this.#funcOnEnd === 'function') this.#funcOnEnd();
  }

  #fixDigit(num,digit){
    const diff = digit - String(num).length;
    if(diff>0) return '0'.repeat(diff)+num;
    return num;
  }
}