javascript - 如何制作一个从 02 :00 reaches 00:00 and then restarts at 06:00 开始的计时器

Question

我如何制作一个计时器，它从 02:00 开始倒计时，当它到达 00:00 时，它会在 06:00 重新开始，然后再次倒计时，直到到达 00:00 并从 00:00 开始向上计数。我已经有了到达 00:00 时的代码。

    var direction = 'down';
    var mins = 30;
    var secs = mins * 60;

    function colorchange(minutes, seconds) {
      var minutes = document.getElementById('minutes');
      var seconds = document.getElementById('seconds');
      var colon = document.getElementById('divide');

      var color;
      if (direction == 'up') {
        color = 'black';
      } else if (secs <= 30) {
        color = 'red';
      } else if (secs <= 59) {
        color = 'orange';
      }
      minutes.style.color = seconds.style.color = colon.style.color = color
    }

    function getminutes() {
      // minutes is seconds divided by 60, rounded down
      mins = Math.floor(secs / 60);
      return ("0" + mins).substr(-2);
    }

    function getseconds() {
      // take mins remaining (as seconds) away from total seconds remaining
      return ("0" + (secs - Math.round(mins * 60))).substr(-2);
    }

    function countdown() {
      setInterval(function() {
        var minutes = document.getElementById('minutes');
        var seconds = document.getElementById('seconds');

        minutes.value = getminutes();
        seconds.value = getseconds();
        colorchange(minutes, seconds);

        if (direction == 'down') {
          secs--;
          if (secs <= 0) {
            direction = 'up';
          }
        } else if (direction == 'up') {
          secs++;
        }
      }, 1000);
    }


    countdown();

<div id="timer" style="width: 90%;">
  <input id="minutes" type="text" style="width: 90%; border: none; background-   color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;">
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;">
  <span id="divide" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">:       </span>
</div>

Answer 1

var direction = 'down';
var first = true; // added
var mins = 2; // changed
var secs = mins * 60;

function colorchange() {
  var minutes = document.getElementById('minutes');
  var seconds = document.getElementById('seconds');
  var colon = document.getElementById('divide');

  var color="black";
  if (secs <= 30) {
    color = 'red';
  } else if (secs <= 59) {
    color = 'orange';
  }
  minutes.style.color = seconds.style.color = colon.style.color = color
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}

function countdown() {
  setInterval(function() {
    var minutes = document.getElementById('minutes');
    var seconds = document.getElementById('seconds');
    if (direction == 'down') {
      secs--;
      if (secs <= 0) {
        if (first) { // added
          first=false;
          mins = 6;
          secs = mins*60;
        }
        else direction = 'up'; // added
      }
    } else if (direction == 'up') {
      secs++;
    }
    minutes.value = getminutes();
    seconds.value = getseconds();
    colorchange();
    
    
  }, 1000);
}


countdown();

<div id="timer" style="width: 90%;">
  <input id="minutes" type="text" style="width: 90%; border: none; background-   color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;">
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;">
  <span id="divide" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">:       </span>
</div>