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?

stackoverflow.com/questions/21294302/…

epascarello
– epascarello

2020-09-15 17:17:52 +00:00
Commented Sep 15, 2020 at 17:17 — epascarello
– epascarello, Commented Sep 15, 2020 at 17:17
stackoverflow.com/questions/20618355/…

epascarello
– epascarello

2020-09-15 17:18:54 +00:00
Commented Sep 15, 2020 at 17:18 — epascarello
– epascarello, Commented Sep 15, 2020 at 17:18

Giorgi Gvimradze · Accepted Answer · 2020-09-15 17:54:41Z

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, 2020 at 17:54

answered Sep 15, 2020 at 17:11

Giorgi Gvimradze

2,2291 gold badge23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

iamcastelli Over a year ago

To add to this, You an find the breakdown of the time conversion of the countdown here w3Schools How TO - JavaScript Countdown Timer

John Spartacus Scotcher Over a year ago

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.

Giorgi Gvimradze Over a year ago

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.

John Spartacus Scotcher Over a year ago

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. :-)

Giorgi Gvimradze Over a year ago

I generally use division or mod functions. try this out: stackoverflow.com/questions/21294302/…

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related