Шкала заполнялась по времени.

[karnitsky]

Как сделать чтобы шкала заполнялась по времени?
Хотел сделать, чтобы отображался урок и заполнялась шкала.

Например есть -

1 урок (начало заполнения 13:00 и до 13:45)
2 урок (начало заполнения 13:45 и до 14:30)
3 урок (начало заполнения 14:30 и до 15:15)
...

[karnitsky]

Подскажите как поправить тут, чтобы указать время начало и конца,

1 урок (начало заполнения 13:00 и до 13:45)
2 урок (начало заполнения 13:45 и до 14:30)
3 урок (начало заполнения 14:30 и до 15:15)

а не проную дату.
Так же не понимаю как он считает отщет, если дата уже прошла.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jqueryscript.net/demo/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown/dest/jquery.countdown.js"></script>
  
<p>Time left: <span class="timeleft"></span></p>
<div id="progressBar">
    <div></div>
</div>
  
  <style type="text/css">
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #ececee;
  border-radius: 15px;
  overflow: hidden;
}
#progressBar div {
   height: 100%;
   text-align: right;
   padding: 0;    /* remove padding */
   line-height: 22px;
   width: 0;
   background-color: #7ac843;
   box-sizing: border-box;
   overflow: visible;
}
  </style>



<script type="text/javascript">
$(document).ready(function() {
    function progress(timeleft, timetotal, $element) {

        let days = parseInt(timeleft / 86400);
        let hoursLeft = parseInt(timeleft - days * 86400);
        let hours = parseInt(hoursLeft / 3600);
        let minutesLeft = parseInt(hoursLeft - hours * 3600);
        let minutes = parseInt(minutesLeft / 60);
        let seconds = parseInt(timeleft % 60);

        let progressBarWidth = timeleft / timetotal * $element.width();

        $element
        .find("div")
        .css('width', progressBarWidth );
        $('.timeleft').html(
         `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`);
        if (timeleft > 0)
        setTimeout(() => progress(timeleft - 1, timetotal, $element), 1000);
    }

    // Starting Date
    let dateStart = new Date('2021-03-10');

    // Ending Date
    let dateEnd   = new Date('2021-03-20');

    // Current Date
    let dateNow   = new Date('2021-03-17');

    let timetotal = (dateEnd.getTime() / 1000) - (dateStart.getTime() / 1000);
    let timeleft  = (dateEnd.getTime() / 1000) - (dateNow.getTime() / 1000);

    progress(timeleft, timetotal, $("#progressBar"));
 });
</script>