javascript - HTML football Timer

Question

I am working on a football live score website.

I need a suggestion in creating a timer for it. A timer that counts for 45 minutes then shows half time for 15 minutes then counts from 46 to 90. It is actually a hell of an herculean task.

I could only create a count up timer which counts up to 90 minutes straight. I can neither pause it nor do anything to it.

Here is my code:

Js:

<script type="text/javascript">
    function startTimer(duration, display) {
    var timer = 0;
    var saved_countdown = localStorage.getItem('saved_countdown');
    setInterval(function () {
        minutes = parseInt(timer / 60);
        seconds = parseInt(timer % 60);

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

        

        if (timer++ > duration) {
            return;
        }
        else {
            display.textContent = minutes + ":" + seconds;
        }
    }, 1000);


}

window.onload = function () {
    var fiveMinutes = 60 * 90,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};


</script>

Any suggestion will be helpful

question from:https://stackoverflow.com/questions/65626339/html-football-timer

Answer 1

There are numerous approaches to implementing such a timer.

Here is an example which collects the data (start and finish times) related to a series of timers into a single object and executes a function which parses that object, running through the series of named interval-based timers in sequence.

---

Working Example:

// GRAB TIMER-DISPLAY ELEMENT
let timerDisplay =  document.getElementsByClassName( 'timerDisplay')[0];

// SET TIMER COUNT STEP
const timerCountStep = 0.01;

// TIMER DATA
const myFootballMatch = {
  'firstHalf' : { 
    'start' : 0,
    'end' : 4.5
  },
  
  'interval' : { 
    'start' : 0,
    'end' : 1.5
  },
  
  'secondHalf' : { 
    'start' : 4.5,
    'end' : 9
  }
};

// THE FUNCTION
const runTimer = (timerObject, timerId = 0) => {

   // EXIT FUNCTION IF THERE ARE NO MORE TIMERS
   if (parseInt(timerId) === Object.keys(timerObject).length) {
     return;
   }

  let timerName = Object.keys(timerObject)[timerId];
  let timerCount = parseFloat(timerObject[timerName]['start']);
  let timerEnd = parseFloat(timerObject[timerName]['end']);
  
  const timer = setInterval(() => {
  
    timerCount = timerCount + timerCountStep;
    
    if (timerName === 'interval') {
      timerDisplay.textContent = '4.50';
    }
    
    else {
      timerDisplay.textContent = timerCount.toFixed(2);
    }
  
    if (timerCount > (timerEnd - timerCountStep)) {
  
      clearInterval(timer);
      runTimer(myFootballMatch, timerId + 1);
    }
  }, 10);
}


// RUN THE FUNCTION
runTimer(myFootballMatch);

.timerDisplay {
  margin: 0;
  font-size: 96px;
  text-align: center;
  font-weight: bold;
}

<p class="timerDisplay"><p>