[_antix]

Original author here.

I have thought about your and other peoples comments. It could well be just rounded to the nearest integer, making my +500ms assumption wrong. However, this would result in 59.51s being displayed as 0:60, though it should be 1:00. Rounding up has the same problem.

I went through the same assumptions coding my own timer. Let's just round everything. But this resulted in 51.0s being displayed as 1:51 on the timer, with rounding up it's even worse resulting in 1:01:51. So at least hours and minutes have to be rounded down. But that makes it even more confusing that seconds are NOT Math.floor().

So in the end I "gave up" and used the date-fns package (works great) but it also rounds everything down. That's why I believe that iOS adds 500ms so the minutes and hours work properly.

[combatentropy]

> this resulted in 51.0s being displayed as 1:51

What?

> with rounding up it's even worse resulting in 1:01:51

Huh?

If you are making some kind of timer, you first should convert the time to pure seconds, or in whatever the smallest unit is that you care to deal with (milliseconds?). It is only at that point that the data is ready for any kind of arithmetic (for example, to subtract 1 second). Then, when you wish to display it, you first convert it.

For example, if the user sets your timer to 2 minutes, you would convert "2:00" to 120 seconds. Then you subtract 1 second. Now the internal value is 119. Then you convert back to the display format: "1:59". But be sure to keep "119" in some internal variable, for the next change.

    <form name=f>
        <input type=number name=h min=0 max=99 value=0>
        <input type=number name=m min=0 max=59 value=00>
        <input type=number name=s min=0 max=59 value=00>
        <input type=submit value=Start>
        <output name=r></output>
    </form>

    <script>

    document.forms.f.addEventListener('submit', function (ev) {

        ev.preventDefault();

        let f = ev.target,
            s = Number(f.h.value * 60 * 60) +
                Number(f.m.value * 60) +
                Number(f.s.value);

        function show(f, s) {

            let h = Math.floor(s / 60 / 60);
            s -= (h * 60 * 60);

            let m = Math.floor(s / 60);
            s -= (m * 60);

            m = String(m).padStart(2, '0');
            s = String(s).padStart(2, '0');

            f.elements.r.value = [h, m, s].join(':');
        }

        show(f, s);

        if (f.timer) { clearInterval(f.timer); }
        f.timer = setInterval(function () {
            if (0 === s) { clearInterval(f.timer); return; }
            s -= 1;
            show(f, s);
        }, 1000);
    });

    </script>

[magicalhippo]

> However, this would result in 59.51s being displayed as 0:60, though it should be 1:00. Rounding up has the same problem.

Surely one shouldn't round _after_ splitting the time into minutes and seconds.

You floor() or ceil() the time, depending on if you're counting up or down, to the lowest unit your timer is showing, then you display it and in the process split it into hours, minutes etc.

So ceil(59.51s) = 60s, which is then converted to 0h 1m 0s for display.

[xuki]

> However, this would result in 59.51s being displayed as 0:60, though it should be 1:00.

They would round it up to 60, the format it to be 01:00.