У меня есть счётчик, в который я сам лично вношу данные (Часы, минуты и секунды) Я реализовал почти всё. Но у меня проблема у меня счётчик иногда сбрасывает по 2 секунды сразу. Буду очень благодарен если поможете!
let hoursVal = $('input[name="hours"]').val();
let OrigHours = hoursVal;
let minutsVal = $('input[name="minuts"]').val();
let OrigMinuts = minutsVal;
let secondVal = $('input[name="second"]').val();
let OrigSecond = secondVal;
let pause = false;
let timer = null;
$('.pause').click(function() {
pause = !pause;
if (pause) {
$(this).text('Старт').addClass('start').removeClass('pause');
} else {
$(this).text('Пауза').addClass('pause').removeClass('start');
}
});
$('.restart').click(function() {
$("#hours").text(OrigHours);
$("#minutes").text(OrigMinuts);
$("#seconds").text(OrigSecond);
$('.start').removeClass('no-active');
});
$('input[type="submit"]').click(function() {
if (timer) {
return;
}
$('.second-figure').addClass('no-active');
});
$('.start').click(function() {
$(this).addClass('no-active');
compareDate = new Date();
compareDate.setHours(compareDate.getHours() + parseInt(hoursVal));
compareDate.setMinutes(compareDate.getMinutes() + parseInt(minutsVal));
compareDate.setSeconds(compareDate.getSeconds() + parseInt(secondVal));
timer = setInterval(timeBetweenDates, 1000, compareDate);
function timeBetweenDates(toDate) {
if (pause) {
toDate.setSeconds(toDate.getSeconds() + 1);
return;
}
let
now = new Date(),
difference = toDate.getTime() - now.getTime();
if (difference <= 0) {
clearInterval(timer);
timer = 0;
} else {
let
seconds = Math.floor(difference / 1000),
minutes = Math.floor(seconds / 60),
hours = Math.floor(minutes / 60);
minutes %= 60;
seconds %= 60;
$("#hours").text(hours);
$("#minutes").text(minutes);
$("#seconds").text(seconds);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<figure class="fisrt-figure">
<h1>Таймер</h1>
<div class="timer-menu">
<h2>До конца задания осталось:</h2>
<div class="timer-info">
<span id="hours">00</span>
<a>:</a>
<span id="minutes">00</span>
<a>:</a>
<span id="seconds">00</span>
</div>
</div>
<div class="timer-control">
<button class="start">Старт</button>
<button class="pause">Пауза</button>
<button class="restart">Перезапуск</button>
</div>
</figure>
<figure class="second-figure">
<h2>Введите данные</h2>
<div class="set-data">
<label>Введите количество часов</label>
<input type="text" name="hours" value="3" placeholder="Введите количество часов">
<label>Введите количество минут</label>
<input type="text" name="minuts" value="00" placeholder="Введите количество минут">
<label>Введите количество секунд</label>
<input type="text" name="second" value="00" placeholder="Введите количество секунд">
<input type="submit" value="Продолжить">
</div>
</figure>
</main>
setInterval
или просто при запущеном таймере сделай кнопку старт неактивной... Хотя первый вариант будет грамотней