CODEWITHSUNDEEP
javascriptjquerytimercountdown
John Spartacus Scotcher
John Spartacus Scotcher

Reputation: 29

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

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?

Upvotes: 1

Views: 1297

Answers (1)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

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

Upvotes: 1

Related Questions