Javascript-форум - Свой велосипедный секундомер

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Свой велосипедный секундомер (https://javascript.ru/forum/misc/52515-svojj-velosipednyjj-sekundomer.html)

Свой велосипедный секундомер

Он работает не точно. Существует довольно большая погрешность. Почему? И как исправить?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    
</head>
<body>
    <div id="clock">
        <span id="hours">00</span>
        :
        <span id="minutes">00</span>
        :
        <span id="seconds">00</span>
    </div>
    <button id ="start">Старт</button>
    <button id = "stop" onclick="clearInterval(st)">Стоп</button>
    
</body>
<script>
        var hours = document.getElementById("hours");
        var minutes = document.getElementById("minutes");
        var seconds = document.getElementById("seconds");
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var h = 0;
        var m = 0;
        var s = 0;
        var right = true;
        var count;

        var stopwatch = function(){
            if (right) {
                count = setInterval (function() {
                            s++;
                            if (s == 60) {
                                s = 0;
                                m++;
                            }
                            if (m == 60) {
                                m = 0;
                                h++;
                            }
                            if (h == 24) {
                                h = 0;
                            }

                            hours.innerHTML = h;
                            minutes.innerHTML = m;
                            seconds.innerHTML = s;

                            if (hours.innerHTML == 0) hours.innerHTML = "0" + hours.innerHTML;
                            if (hours.innerHTML < 10 && hours.innerHTML.charAt(0) != 0) {
                                hours.innerHTML = "0" + hours.innerHTML;
                            }
                            if (minutes.innerHTML  == 0) minutes.innerHTML = "0" + minutes.innerHTML;
                            if (minutes.innerHTML < 10 && minutes.innerHTML.charAt(0) != 0) {
                                minutes.innerHTML = "0" + minutes.innerHTML;
                            }
                            if (seconds.innerHTML < 10 && seconds.innerHTML.charAt(0) != 0) {
                                seconds.innerHTML = "0" + seconds.innerHTML;
                            }
                        },
                        1000);
            }

            right = false;
        }

        var rightToFalse = function() {
            if (right == false) right = true;
        }

        start.addEventListener("click", stopwatch);
        stop.addEventListener("click", rightToFalse);
    </script>
</html>

Тут:
http://javascript.ru/forum/misc/1566...html#post95613

Объясняется в чем беда.

Цитата:

Сообщение от dmitriymar (Сообщение 95613)

никак по таймерам.а код вызываемый по таймеру сколько милесекунд выполняется? 11?12?15?.... пока код не выполнится до конца выполнение кода не пойдёт повторно-хоть и время срабатывания таймера подошло и прошло.
и на разных машинах в зависимости от их мощности отставание будет различным
только увеличить шаг у таймера
отслеживать только машинное время-но если я точно помню -то там минимальное изменение значения 1 секунда

Если я правильно понял, то необходимо от даты на текущий момент (с определенной частотой обновления) отнимать дату на момент запуска секундомера. Доставать от туда миллисекунды, секунды, минуты, часы и выводить это все в документ.
Будет ли тут погрешность?

Цитата:

Сообщение от leshiple

Будет ли тут погрешность?

Суди сам:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="hours">00</span>:<span id="mins">00</span>:<span id="secs">00</span>:<span id="ms">000</span><br>
<button onclick="runTimer()">start</button>

<script>
var hSpan = document.getElementById('hours'),
    minSpan = document.getElementById('mins'),
    secSpan = document.getElementById('secs'),
    msSpan = document.getElementById('ms');


function runTimer() {
  var beginTime = new Date();
  
  setInterval(function() {
    var delta = new Date() - beginTime;
    var hours = Math.floor(delta/3600000);

    delta = delta - hours*3600000;
    var mins = Math.floor( delta/60000 );

    delta = delta - mins*60000;
    var secs = Math.floor( delta/1000 );

    delta = delta - secs*1000;
    var ms = delta;

    hSpan.innerHTML = format(hours, 2);
    minSpan.innerHTML = format(mins, 2);
    secSpan.innerHTML = format(secs, 2);
    msSpan.innerHTML = format(ms, 3);
  }, 50);
}

function format(num, maxNumbers) {
  var numStr = num + '';
  while(numStr.length < maxNumbers) {
    numStr = '0' + numStr;
  }

  return numStr;
}
</script>

</body>
</html>

jsnb,
Я примерно так и думал. Но мысль пришла поздно, сон поборол меня вчера. Функция format - красивое решение. А delay у setInterval почему выставлено в 50? Второй раз встречаю именно это число, чем оно обоснованно?
Смею предположить что и тут будет погрешность. Наверное нужно узнать когда она (погрешность) достигнет секунды, например через 1 час, тогда необходимо функцию перезапустить и начать считать с последнего значения.