How do I do a continuous timing hour, minute, second

Question

I'm trying a continuous timing for hour: minute: second simultaneously.
example start 00:00:00, then 06:56:34 and continue

function startTimer() {

  if (seconds <= 59) {
    seconds++;
    mySecond.innerHTML = seconds;
  }
  else if (seconds == 60 && minutes <= 59) {
    seconds == 0;
    minutes++;
    myMinute.innerHTML = minutes;
  }

  if (minutes <= 59) {
    minutes++;
    myMinute.innerHTML = minutes;
  }
  else if (minutes == 60 && hours <= 59) {
    minutes == 0;
    hours++;
    myHour.innerHTML = hours;
  }
}

[edit - from comments on Mister Jojo first answer (deleted for -2)]

window.onload = function () {
  var hours = 00;
  var minutes = 00;
  var seconds = 00;
  var myHour = document.getElementById("hours");
  var myMinute = document.getElementById('minutes');
  var mySecond = document.getElementById('seconds');
  var cButton = document.getElementById('count');
  var rButton = document.getElementById('reset');
  var Interval;

  cButton.onclick = function () {
    clearInterval(Interval);
    Interval = setInterval(startTimer, 10);
  }
  rButton.onclick = function () {
    clearInterval(Interval);
    hours = "00";
    minutes = "00";
    seconds = "00";
    myHour.innerHTML = hours;
    myMinute.innerHTML = minutes;
    mySecond.innerHTML = seconds;
  }

  function startTimer() {
    if (seconds === 00) {
      mySecond.innerHTML = ++seconds % 60;
    }
  }
}

_“example start 00:00:00, then 06:56:34 and continue”_ — That’s not clear. What is your current result, what is your desired result? What have you tried? How does your code relate to the rest of your question? — Sebastian Simon, Aug 08 '20 at 22:58
Your code seems to show the `update` method, not the `startTimer` one — Bergi, Aug 08 '20 at 22:59
Have a look at https://stackoverflow.com/q/20618355/1048572 and https://stackoverflow.com/q/29971898/1048572, that should find you everything you need (but it's still unclear what exactly you are trying to do, and what problem you are experiencing with the posted code). — Bergi, Aug 08 '20 at 23:04
Timer count down - did you mean a stop watch? Where does "it" get "06:56:34"? Are `seconds`, `minutes` and `hours` global variables? Where is `startTimer()` called from? - did you mean something like `timerTick()` - so you are calling it every second? Perhaps: `timerTick(hours, minutes, seconds)` and call it like this: `timerTick(6,56,34)` — iAmOren, Aug 08 '20 at 23:53

Mister Jojo · Answer 1 · 2020-08-09T01:32:59.850

following the new information given by the po, here is the solution that I propose:

const timer     = { ref:null, tZero:null, tim:0 }
    , myTime    = document.getElementById('my-Time')
    , btStart   = document.getElementById('bt-start')
    , btStop    = document.getElementById('bt-stop')
    , btReset   = document.getElementById('bt-reset')
    , twoDigits = n => ('0' + n).slice(-2)
    , one_Sec   = 1000
    , one_Min   = one_Sec * 60
    , one_Hour  = one_Min * 60 

function countUp()
  {
  let now   = new Date().getTime()
  timer.tim = now - timer.tZero 
  let h     = Math.floor(timer.tim  / one_Hour)
    , m     = Math.floor((timer.tim % one_Hour) / one_Min  )
    , s     = Math.floor((timer.tim % one_Min ) / one_Sec  )

  myTime.textContent = ` ${twoDigits(h)} : ${twoDigits(m)} : ${twoDigits(s)} `
  }

btStart.onclick=()=>
  {  
  timer.tZero      = new Date().getTime() - timer.tim 
  timer.ref        = setInterval(countUp,500)
  btStart.disabled = true
  btStop.disabled  = false
  }
btStop.onclick=()=>
  {
  clearInterval( timer.ref )
  timer.ref        = null
  btStart.disabled = false
  btStop.disabled  = true
  }
btReset.onclick=()=>
  {
  if (timer.ref) clearInterval( timer.ref )
  myTime.textContent = ' 00 : 00 : 00 '
  timer.tZero        = null
  timer.ref          = null
  timer.tim          = 0
  btStart.disabled   = false
  btStop.disabled    = true
  }

<h4>Chrono</h4>

<div id="my-Time"> 00 : 00 : 00 </div>

<br>
<button id="bt-start"> count </button>
<button id="bt-stop" disabled> stop </button>
<button id="bt-reset"> reset </button>

It's better to give a detailed explanation how you implemented it. I think only experienced developers will understand what you did. — Marios Nikolaou, Aug 09 '20 at 12:02

score -2 · Answer 2 · edited Aug 08 '20 at 23:34

-2

This beauty works fine.

<body>
  <p id="timer"></p>
  <script type="text/javascript">
    ss = 0;

    setInterval(function() {
      ss++;
      h = twoDigits(Math.floor(ss / 3600));
      m = twoDigits(Math.floor(ss % 3600 / 60));
      s = twoDigits(ss % 60);
      t = h + ":" + m + ":" + s;
      document.getElementById("timer").innerHTML = t;
    }, 1000);

    function twoDigits(n) {
      return (n < 10) ? "0" + n : n;
    }
  </script>
</body>

edited Aug 08 '20 at 23:34

Sebastian Simon

18,263
7
55
75

answered Aug 08 '20 at 23:32

Nissifer

1
1

very bad idea, the setInterval method does not guarantee any precision to measure the time – Mister Jojo Aug 09 '20 at 00:45

How do I do a continuous timing hour, minute, second

2 Answers2