如何使定时器从02:00开始到00:00然后在06:00重新开始

Question

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

＆＃13;

＆＃13;

    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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>