JavaScript倒计时器的暂停/恢复功能实现求助

我正在制作一款带有时长增减按钮的25分钟倒计时器，已实现点击Start按钮启动计时，但无法添加Pause按钮暂停、点击Start按钮恢复计时的功能。尝试过相关方案但无法适配现有逻辑，附上代码寻求相关实现提示。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>25 + 5 Clock</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles/styles.css">

    <style>
      * {
  text-align: center;
  }
    </style>


  </head>
  <body>
    <h1>25 + 5 Clock</h1>
    <div class="row" id="columnas">

    <div class="col" id="break-label">Hey you!
    <div class="5">
        <button id="break-decrement" class="btn btn-primary" type="button" name="button" onclick="breakDec()">break-dec</button>
        <div id="break-length">5</div>
        <button id="break-increment" class="btn btn-primary" type="button" name="button" onclick="breakInc()">break-inc</button>
    </div>
    </div>


    <div class="col" id="session-label">Session length
    <div class="25">
      <button id="session-decrement" class="btn btn-success" type="button" name="button" onclick="sessionDec()">session-dec</button>
      <div id="session-length">25</div>
      <button id="session-increment" class="btn btn-success"   type="button" name="button" onclick="sessionInc()">session-inc</button>
    </div>
    </div>

    </div>



    <div class="tiempo">
          <div id="timer-label">Session</div>
          <div id="time-left">
            <span class="minutes_value" id="minute_value">25</span>:
            <span class="seconds_value" id="second_value">00</span>
            </div>
    </div>

    <div class="botones">
    <button id="start_stop" type="button" name="button" onclick="alertMe()">Start</button>
    <button id="reset" type="button" name="button">Reset</button>
    </div>

    <button type="button" name="button" id="clickButton">Pause</button>

    <! -- Break decrement      -->
    <script>

      function breakDec() {
        if (document.getElementById("break-length").innerHTML <= "1") {
          document.getElementById("break-length").innerHTML === parseFloat(1)
        }
        else {document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) - parseFloat( 1)}

      }
    </script>

    <! -- Break increment      -->
<script>
    function breakInc() {
      document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) + parseFloat( 1)
    }
  </script>

  <! -- session decrement      -->

      <script>

        function sessionDec() {

          if (document.getElementById("session-length").innerHTML <= 1) {
            document.getElementById("session-length").innerHTML === parseFloat(1)
          } else
          {document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) - parseFloat( 1);
          document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) - parseFloat( 1);}
        }
      </script>

      <! -- Session increment      -->
  <script>
      function sessionInc() {
        document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) + parseFloat( 1);
        document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) + parseFloat( 1);
      }
    </script>

    <! -- *****************************************************************************************      -->
    <! -- C          O          U          N          T          D          O          W          N      -->
    <! -- *****************************************************************************************      -->
    <! -- *****************************************************************************************      -->
    <! -- *****************************************************************************************      -->

    <script>

    function alertMe()  {

      const deadlineTime = new Date(new Date().getTime() + parseFloat(document.getElementById("minute_value").innerHTML) * 60000);
      setInterval(function() {

    //current time
    const currentTime = new Date();

    //show the start time, equivalent to 5 minutes(300000)
    const time_start = deadlineTime - currentTime;

    //converting the time in minutes
    const min_info = Math.floor((time_start % (1000 * 60 * 60)) / (1000 * 60));

    //converting time in seconds
    const sec_info = Math.floor((time_start % (1000 * 60)) / 1000);

    //mostrar temporizador
    document.getElementById("minute_value").innerHTML = min_info;
    document.getElementById("second_value").innerHTML = sec_info;

    if (time_start < 0) {
      clearInterval(alertMe);
      document.getElementById("minute_value").innerHTML = "0";
      document.getElementById("second_value").innerHTML = "0";
    }

     }, 5);

}

</script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" charset="utf-8"></script>


  </body>
</html>

• 全局状态管理：新增三个全局变量，分别存储定时器ID、计时状态、剩余毫秒数，用于控制暂停/恢复逻辑：

  let intervalId = null;
  let isRunning = false;
  let remainingTime = 0;
  

• 重构启动函数：修改alertMe，让它支持从剩余时间恢复计时，避免重复创建定时器：

  function alertMe() {
    if (isRunning) return;
    
    if (remainingTime === 0) {
      const minutes = parseFloat(document.getElementById("minute_value").innerHTML);
      const seconds = parseFloat(document.getElementById("second_value").innerHTML);
      remainingTime = (minutes * 60 + seconds) * 1000;
    }
    
    const deadlineTime = new Date(new Date().getTime() + remainingTime);
    isRunning = true;
    
    intervalId = setInterval(function() {
      const currentTime = new Date();
      const timeLeft = deadlineTime - currentTime;
      
      if (timeLeft <= 0) {
        clearInterval(intervalId);
        isRunning = false;
        remainingTime = 0;
        document.getElementById("minute_value").innerHTML = "00";
        document.getElementById("second_value").innerHTML = "00";
        return;
      }
      
      remainingTime = timeLeft;
      const min_info = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      const sec_info = Math.floor((timeLeft % (1000 * 60)) / 1000);
      
      // 补零处理，优化显示
      document.getElementById("minute_value").innerHTML = min_info.toString().padStart(2, "0");
      document.getElementById("second_value").innerHTML = sec_info.toString().padStart(2, "0");
    }, 1000); // 改为1秒触发一次，性能更优
  }
  

• 添加暂停函数：点击Pause按钮时清除定时器，标记计时状态为停止：

  function pauseTimer() {
    if (!isRunning) return;
    clearInterval(intervalId);
    isRunning = false;
  }
  

• 重置函数完善：点击Reset按钮时清空所有状态，恢复初始时长：

  function resetTimer() {
    clearInterval(intervalId);
    isRunning = false;
    remainingTime = 0;
    const sessionLength = parseFloat(document.getElementById("session-length").innerHTML);
    document.getElementById("minute_value").innerHTML = sessionLength.toString().padStart(2, "0");
    document.getElementById("second_value").innerHTML = "00";
  }
  

• 更新按钮事件：修改HTML中按钮的点击绑定：

  <div class="botones">
    <button id="start_stop" type="button" name="button" onclick="alertMe()">Start/Resume</button>
    <button id="reset" type="button" name="button" onclick="resetTimer()">Reset</button>
  </div>
  
  <button type="button" name="button" id="clickButton" onclick="pauseTimer()">Pause</button>
  

内容的提问来源于stack exchange，提问作者Bob Marin