How do I show the javascript timer in my code in an html div?

Question

I have a simple timer that times a test, which is working great

$(document).ready(function() {
    var varTimerInMiliseconds = 3000;
    setTimeout(function(){ 
        document.getElementById("cntnt01moduleform_1").submit();
    }, varTimerInMiliseconds);
});

However, I also want to show the countdown to the student who is taking the test. How can I pass the timer itself into a div with the ID of id="testTimer" and how can I convert the timer into minutes and seconds rather than milliseconds?

https://stackoverflow.com/questions/21294302/converting-milliseconds-to-minutes-and-seconds-with-javascript — epascarello, Sep 15 '20 at 17:17
https://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer — epascarello, Sep 15 '20 at 17:18

Giorgi Gvimradze · Answer 1 · 2020-09-15T17:54:41.190

1

This code lets you to countdown from 5 to 1 and print into testTimer div.

<div id="testTimer"></div>

JS code

function Timer() {
  var counter = 10;
  var myTimer = setInterval(function() {
    document.getElementById("testTimer").innerHTML = counter;
    counter--;
    if (counter < 0) {
      clearInterval(myTimer);
      document.getElementById("testTimer").style.color = "red";

      // do anything then time is up. ex: submit() function
      document.getElementById("cntnt01moduleform_1").submit();
    }
  }, 1000);
}
Timer();

As you can see there is no need for translating milliseconds to seconds by multiplying. You just do the update of seconds once in 1000 ms. JS Feedle

edited Sep 15 '20 at 17:54

answered Sep 15 '20 at 17:11

Giorgi Gvimradze

1,714
1
17
34

3

To add to this, You an find the breakdown of the time conversion of the countdown here [w3Schools How TO - JavaScript Countdown Timer](https://www.w3schools.com/howto/howto_js_countdown.asp) – iamcastelli Sep 15 '20 at 17:17
Great - thanks guys. But how do I relate that to the existing code I have? In the existing code, the two things that it is doing are.. 1. take the time in milliseconds (that's set elsewhere and called in, so I don't have a choice of it being seconds, it WILL be milliseconds. 2. submit a form on countdown end. I can't see how to use the code Giorgi showed as part of my code - i.e. do both the submit and the show and do it from milliseconds. – John Spartacus Scotcher Sep 15 '20 at 17:33
Hi @JohnSpartacusScotcher, thank you for updating your request. I updated also the code and commented on the place where you can add some other functions too. Also, you can countdown from 10 to 0 now, where the last `0` digit will become red too. If this is the code you needed to get, please consider accepting. – Giorgi Gvimradze Sep 15 '20 at 17:51
That's great, Giorgi - thank you very much. I have it working now and counting down seconds. (I converted the milliseconds I have into seconds outside of the script)> The only last thing that would be great to understand how to do is how to show the timer in muites and seconds. E.g. 90 seconds would countdown from 1:30 (minutes and seconds) rather than 90. Thanks again. :-) – John Spartacus Scotcher Sep 15 '20 at 18:14
I generally use division or mod functions. try this out: https://stackoverflow.com/questions/21294302/converting-milliseconds-to-minutes-and-seconds-with-javascript – Giorgi Gvimradze Sep 15 '20 at 18:16

How do I show the javascript timer in my code in an html div?

1 Answers1