【初心者向け】Javascriptで現在時刻取得、タイマー、ストップウォッチを作成する

    <div class="now">
      <h2>現在時刻</h2>
      <p id="js-nowTime">00:00:00</p>
    </div>

// 現在時刻
const $nowTime = document.getElementById("js-nowTime");
let now; //秒
let hour; //時
let minute; //分
let second;  //秒

//現在時刻取得
function nowTimeGet() {
  now = new Date(); 
  hour = now.getHours();
  minute = now.getMinutes();
  second = now.getSeconds();
  //10を超えたら0に戻す
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  return hour, minute, second;
}

//1秒ごとに、nowTimeGet関数を実行し、HTMLの文字を書き換える
window.addEventListener("load", () => {
  setInterval(function () {
    nowTimeGet();
    $nowTime.innerHTML = `${hour}:${minute}:${second}`;
  }, 1000);
});

<div class="stopwatch">
  <h2>ストップウォッチ</h2>
  <p id="js-stopwatch">00:00:00</p>
  <input id="js-stopwatchStart" type="button" value="開始" />
  <input id="js-stopwatchStop" type="button" value="停止" disabled />
  <input id="js-stopwatchResset" type="button" value="リセット" disabled />
</div>

// ■ストップウォッチ
const $watch = document.getElementById("js-stopwatch");
const $start = document.getElementById("js-stopwatchStart");
const $stop = document.getElementById("js-stopwatchStop");
const $resset = document.getElementById("js-stopwatchResset");

// 開始時間
let startTime;
// 停止時間
let stopTime = 0;
// タイムアウトID
let timeoutID;

// 時間を表示する関数
function displayTime() {
  const currentTime = new Date(Date.now() - startTime + stopTime);
  const h = String(currentTime.getHours() - 9).padStart(2, "0");
  const m = String(currentTime.getMinutes()).padStart(2, "0");
  const s = String(currentTime.getSeconds()).padStart(2, "0");

  $watch.textContent = `${h}:${m}:${s}`;
  timeoutID = setTimeout(displayTime, 1000);
}

// スタートボタンがクリックされたら時間を進める
$start.addEventListener("click", () => {
  $start.disabled = true;
  $stop.disabled = false;
  $resset.disabled = true;
  startTime = Date.now();
  displayTime();
});

// ストップボタンがクリックされたら時間を止める
$stop.addEventListener("click", function () {
  $start.disabled = false;
  $stop.disabled = true;
  $resset.disabled = false;
  clearTimeout(timeoutID);
  stopTime += Date.now() - startTime;
});

// リセットボタンがクリックされたら時間を0に戻す
$resset.addEventListener("click", function () {
  $start.disabled = false;
  $stop.disabled = true;
  $resset.disabled = true;
  $watch.textContent = "00:00:00";
  stopTime = 0;
});

<div class="timer">
  <h2>タイマー</h2>
  <div class="timer-input">
    <input type="text" value="0" />秒
  </div>
  <p id="js-timerTime">00:00:00</p>
  <input id="js-timerStart" type="button" value="開始" />
  <input id="js-timerStop" type="button" value="停止" disabled />
  <input id="js-timerResset" type="button" value="リセット" disabled />
</div>

// ■カウントダウンタイマー
const $timer=document.getElementById('js-timerTime');
const $tStart = document.getElementById('js-timerStart');
const $tStop =document.getElementById('js-timerStop');
const $tResset =document.getElementById('js-timerResset');

// 入力値を取得
const $input = document.querySelector('.timer-input input');

// ターゲット時間
let tTarget; //残り時間
let tStartTime; //開始時刻
let tStopTime=0; //停止時間
let tCountId ; //インターバル格納
let setTime; //カウントダウン設定時間

// ターゲット時間をセットし描画
function displayCount(){
  tTarget = new Date(tStartTime+(1000*setTime)-Date.now()-tStopTime);
  let ch = String(tTarget.getHours()-9).padStart(2,'0');
  let cm = String(tTarget.getMinutes()).padStart(2,'0');
  let cs = String(tTarget.getSeconds()).padStart(2,'0');
  if(cs==0){
    tResset();
    alert('終了です');
  }else{
    $timer.innerHTML=(`${ch}:${cm}:${cs}`);
    tCountId = setTimeout(displayCount,500);
  }
}

// スタートボタンを押したとき
$tStart.addEventListener('click',()=>{
  $tStart.disabled = true;
  $tStop.disabled = false;
  $tResset.disabled = true;
  setTime =$input.value;
  tStartTime = Date.now();
  displayCount();
});

// ストップボタンを押したとき
$tStop.addEventListener('click',()=>{
  $tStart.disabled = false;
  $tStop.disabled = true;
  $tResset.disabled = false;
  clearTimeout(tCountId);
  tStopTime +=Date.now()-tStartTime;
});

// リセットボタンが押されたとき
$tResset.addEventListener("click", function () {
  tResset();
});

function tResset(){
  $tStart.disabled = false;
  $tStop.disabled = true;
  $tResset.disabled = true;
  $timer.textContent = "00:00:00";
  tStopTime = 0;  
}