计时器结束时如何用div阻止计时器？

如何解决计时器结束时如何用div阻止计时器？

我有一个页面，用户可以在其中单击用于设置特定时间的计时器的按钮。我希望doneDiv10在到达00:00时阻止计时器（用户选择）。不用做这样的事情就可以做到吗

    function showDoneDiv10(){
document.getElementById("timer10").style.display = "none";
document.getElementById("doneDiv10").style.display = "block";
    }

---

我的代码：

 <div id="doneDiv10" >

       <button class = "button button3" onclick="showBreakTimers()"> I'm not done with this assignment,I need more time! </button>
       <button class = "button button3" onclick="showBreakTimersAnotherAssignment10()"> I want to work on another assignment! </button>
       <button class = "button button3" onclick="workOn(); showWorkOn10 "> I'm done with my homework for today!</button>

    </div>

function startTimer(duration,display) {
  var timer = duration,minutes,seconds;
  setInterval(function () {
      minutes = parseInt(timer / 60,10);
      seconds = parseInt(timer % 60,10);

      minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;

          display.textContent = minutes + ":" + seconds;

          if (--timer < 0) {
              timer = duration;
          }
      },1000);
  }

  function start10() {
      var tenMinutes = 60 * 10,display10 = document.querySelector('#time10');
      startTimer(tenMinutes,display10);

  };

  function start20() {
      var twentyMinutes = 60 * 20,display20 = document.querySelector('#time20');
      startTimer(twentyMinutes,display20);
  };



  
  <div id=timer10 style ="display:none">
  <h1><span id="time10">10:00</span></h1>
  </div>

  <div id=timer20 style="display:none">
    <h1><span id="time20">20:00</span></h1>
  </div>