JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<div id='timer'>
  <div id='minute'>
    <div><span id='m'>1</span></div>
    <div><span id='mm'>5</span></div>  
  </div>
  <div id='operator'>:</div>
  <div id='second'>
    <div><span id='s'>0</span></div>
    <div><span id='ss'>0</span></div>
  </div>
</div>

CSS

#timer{
  margin: 20px auto;
  text-align: center;
  color: #333;
  font-family: fantasy;
  font-size: 100px;
  cursor: pointer;
}
#timer div{
  display: inline;
}
#timer #operator{
  float: left;
  font-size: 31px;
  margin-right: 6px;
  margin-left: 5px;
}
#timer div div{
  float: left;
  font-size: 26px;
  font-family: 'GOST type B Standard Bold', 'GOST type B Standard', serif;
  font-weight: 700;
  background: #7c7768;
  width: 24px;
  height: 29px;
  margin-top: 4px;
  padding: 4px;
  padding-left: 7px;
  margin-right: 2px;
  background: #2a2422;
  color: #7c7768; 
}

JavaScript

window.onload = function(){
  function timer(){
    let minute = document.getElementById('m').innerHTML + document.getElementById('mm').innerHTML;
    let second = document.getElementById('s').innerHTML + document.getElementById('ss').innerHTML;
    let end = false;

    if(second > 0) second--;
    else {
      second = 59;
      if( minute > 0) minute--;
      else {
        end = true;
      }
    }
    if(end){
      clearInterval(intervalID);
      alert('Время истекло');
    } else {
      document.getElementById('m').innerHTML = Math.floor(minute/10);
      document.getElementById('mm').innerHTML = minute % 10;
      document.getElementById('s').innerHTML = Math.floor(second/10);
      document.getElementById('ss').innerHTML = second % 10;
    }
  }
  window.intervalID = setInterval(timer, 1000);
}