<header>
  <label>задать время<input type="time" id="time"></label>
  <label>текущее время<input type="checkbox" checked id="realtime"></label>
</header>
<h1>Расписание</h1>
<div class="lesson">
  <h2>Геометрия</h2>
  <p>
    <span class="status"></span>
    <span class="limits">08:00 - 08:40</span>
  </p>
</div>
<div class="lesson">
  <h2>Алгебра</h2>
  <p>
    <span class="status"></span>
    <span class="limits">08:50 - 09:30</span>
  </p>
</div>
<div class="lesson">
  <h2>Литература</h2>
  <p>
    <span class="status"></span>
    <span class="limits">09:40 - 10:20</span>
  </p>
</div>
<div class="lesson">
  <h2>Русский язык</h2>
  <p>
    <span class="status"></span>
    <span class="limits">10:30 - 11:10</span>
  </p>
</div>
<div class="lesson">
  <h2>Баиньки</h2>
  <p>
    <span class="status"></span>
    <span class="limits">22:00 - 07:00</span>
  </p>
</div>

*{ margin: 0; padding: 0;}

header{
  position: fixed;
  top: 0;
  margin: 0.5em;
  padding: 0.5em;
  background: rgba(255,255,255,0.9);
}

body{
  padding-top: 3em;
}

.lesson{
  margin: 0.5em;
  padding: 0.5em;
  background: #eee;
  border-radius: 0.5em;
}

.status.lt{
  color: #0b0;
}
.status.gt{
  color: #b00;
}
.status.eq{
  color: #bb0;
}
.status.sgt{
  color: #b60;
}
.status.slt{
  color: #8b0;
}

function qs( s, n ) { return (n||document).querySelector(s) }
function qf( s, f, n ) { return [...(n||document).querySelectorAll(s)].map(f) }
function wr( e, t ) { e.innerHTML = t }
function between( n, a, b ) { return ( n >= a ) && ( n <= b ) }


const inptm = qs( '#time' );
const chrt = qs( '#realtime' );
const lessons = qf( '.lesson', a => a );

const states = {
  'lt': 'В ожидании',
  'gt': 'Завершён',
  'eq': 'Длится',
  'sgt': 'Закончился',
  'slt': 'На очереди'
}

function mark( time ) {
  lessons.forEach( ( d, i ) => {
    const [ t1, t2 ] = limits( d );
    const [ t3 ] = limits( lessons[ i+1 ] );
    const [ _, t0 ] = limits( lessons[ i-1 ] );
    const st = statused( time, t1, t2, t3, t0 );
    wr( qs( '.status', d ), states[ st ] );
    qs( '.status', d ).className = 'status ' + st;
  } )
}

function limits( d ) {
  if( !d ) return [ '23:59:59', '00:00:00' ];
  return qs( '.limits', d ).innerHTML.split( ' - ' );
}

function statused( t, t1, t2, t3, t0 ) {
  if( t1 > t2 ) {
    if( t < t1 && t < t2 ) t = overday( t );
    t2 = overday( t2 );
  }
  if( t0 && t > t0 && t < t1 ) return 'slt';
  if( t < t1 ) return 'lt';
  if( t <= t2 ) return 'eq';
  if( t3 && t <= t3 ) return 'sgt';
  return 'gt';
}

function overday( t ) {
  return t.replace( /^\d+/, h => +h + 24 );
}


(function repeat() {
  const rt = new Date().toString().split(' ')[4];
  if( chrt.checked ) {
    mark( rt );
    inptm.value = rt;
  }else{
    mark( inptm.value )
  }
  setTimeout( repeat, 1000 - +new Date() % 1000 );
})()