How to edit a javascript clock to change the team color at specific times

Question

Ola would like to know how I can edit the code below so that it works as follows I need that when giving 12 AM the watch team has the green numbers from 12 AM to 6:45 AM after that time the team color stay and red until give again the scheduled period for the team to be green again.

  <script type="text/javascript">
var myVar = setInterval(myTimer2 ,1000);
function myTimer2() {
    var d = new Date(), displayDate;
   if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
      displayDate = d.toLocaleTimeString('pt-BR');
   } else {
      displayDate = d.toLocaleTimeString('pt-BR', {timeZone: 'America/Sao_Paulo'});
   }
      document.getElementById("relogio").innerHTML = displayDate;
}

Answer 1

I think this will work.

setInterval(myTimer2, 1000);

const colorChangeHoursBegin = 0;
const colorChangeHoursEnd = 6;

const colorChangeMinutesBegin = 0;
const colorChangeMinutesEnd = 45;

function myTimer2() {
  let d = new Date(), displayDate;
  if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    displayDate = d.toLocaleTimeString('pt-BR');
  } else {
    displayDate = d.toLocaleTimeString('pt-BR', { timeZone: 'America/Sao_Paulo' });
  }

  let colorChangeBegin = new Date();
  colorChangeBegin.setHours(colorChangeHoursBegin, colorChangeMinutesBegin);

  let colorChangeEnd = new Date();
  colorChangeEnd.setHours(colorChangeHoursEnd, colorChangeMinutesEnd);

  if(d.getHours() > colorChangeBegin.getHours() && d.getHours() < colorChangeEnd.getHours()) {
    document.getElementById("relogio").style.color = '#f00';
  }else {
    document.getElementById("relogio").style.color = '#0f0';
  }

  document.getElementById("relogio").innerHTML = displayDate;
}