Первая секунда таймера слишком быстро проходит. Сразу после нажатия кнопки "Старт", без паузы отображается значение меньше чем было указано. Из-за чего это? И как исправить?
<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 30px;
text-align: center;
}
button {
width: 53px;
}
<style>
</head>
<body>
<div id="tim">
<input id = "hours" type="text" placeholder="00"/>
<input id = "minutes" type="text" placeholder="00"/>
<input id = "seconds" type="text" placeholder="00"/>
</div>
<button id="start">Старт</button>
<button id="stop">Стоп</button>
<script>
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var setIntervalTimer;
var counter;
var rightToStart = true;
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var timer = function() {
if (rightToStart) {
var hInput = +hours.value;
var mInput = +minutes.value;
var sInput = +seconds.value;
var today = new Date();
var endTime = new Date(today.getFullYear(),
today.getMonth(),
today.getDate(),
today.getHours() + hInput,
today.getMinutes() + mInput,
today.getSeconds() + sInput);
if (hInput != 0 || mInput != 0 || sInput != 0) {
counter = function () {
var nowTime = new Date();
var delta = endTime - nowTime;
var h = Math.floor(delta / 3600000);
delta = delta - h * 3600000;
var m = Math.floor(delta / 60000);
delta = delta - m * 60000;
var s = Math.floor(delta / 1000);
hours.value = format(h, 2);
minutes.value = format(m, 2);
seconds.value = format(s, 2);
}
setIntervalTimer = setInterval(counter, 50);
rightToStart = false;
}
}
}
function format(num, maxNumbers) {
var numStr = num + '';
while (numStr.length < maxNumbers) {
numStr = '0' + numStr;
}
return numStr;
}
var clear = function(){
rightToStart = true;
clearInterval(setIntervalTimer);
}
start.addEventListener("click", timer);
stop.addEventListener("click", clear);
</script>
</body>
</html>