Подскажите как поправить тут, чтобы указать время начало и конца,
Цитата:
|
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>