How to create a JQuery Clock / Timer

How to create a JQuery Clock / Timer

I have a simple quiz application and I want display a nice timer / clock at the top of the page which shows the user how long they've been going for. (If I could somehow show them a timer for Total Quiz Time and also a second one for This Question Time that would be even cooler but I should be able to figure out how to do myself that once I've got one timer working.

My question is:

What's a nice, easy way to show a simple timer / clock using JQuery? (straight JS is also ok) I know how to check time, but how do I get incrementing seconds?

My own searches keep leading me to JQuery plugins (I want to roll my own) and also "event timers" which are not what I'm looking for...

Answer by SLaks for How to create a JQuery Clock / Timer

You're looking for the setInterval function, which runs a function every x milliseconds.

For example:

var start = new Date;    setInterval(function() {      $('.Timer').text((new Date - start) / 1000 + " Seconds");  }, 1000);  

Answer by Ganesh Shankar for How to create a JQuery Clock / Timer

setInterval as suggested by SLaks was exactly what I needed to make my timer. (Thanks mate!)

Using setInterval and this great blog post I ended up creating the following function to display a timer inside my "box_header" div. I hope this helps anyone else with similar requirements!

 function get_elapsed_time_string(total_seconds) {    function pretty_time_string(num) {      return ( num < 10 ? "0" : "" ) + num;    }      var hours = Math.floor(total_seconds / 3600);    total_seconds = total_seconds % 3600;      var minutes = Math.floor(total_seconds / 60);    total_seconds = total_seconds % 60;      var seconds = Math.floor(total_seconds);      // Pad the minutes and seconds with leading zeros, if required    hours = pretty_time_string(hours);    minutes = pretty_time_string(minutes);    seconds = pretty_time_string(seconds);      // Compose the string for display    var currentTimeString = hours + ":" + minutes + ":" + seconds;      return currentTimeString;  }    var elapsed_seconds = 0;  setInterval(function() {    elapsed_seconds = elapsed_seconds + 1;    $('#box_header').text(get_elapsed_time_string(elapsed_seconds));  }, 1000);  

Answer by Brutnus for How to create a JQuery Clock / Timer

How about the best of both worlds? I combined the answer with the OP's format.

function pretty_time_string(num) {      return ( num < 10 ? "0" : "" ) + num;    }    var start = new Date;        setInterval(function() {    var total_seconds = (new Date - start) / 1000;         var hours = Math.floor(total_seconds / 3600);    total_seconds = total_seconds % 3600;      var minutes = Math.floor(total_seconds / 60);    total_seconds = total_seconds % 60;      var seconds = Math.floor(total_seconds);      hours = pretty_time_string(hours);    minutes = pretty_time_string(minutes);    seconds = pretty_time_string(seconds);      var currentTimeString = hours + ":" + minutes + ":" + seconds;      $('.timer').text(currentTimeString);  }, 1000);  

Answer by Jim Shaw for How to create a JQuery Clock / Timer

var eventdate = new Date("January 01, 2014 00:00:00");    function toSt(n) {   s=""   if(n<10) s+="0"   return s+n.toString();  }    function countdown() {   cl=document.clock;   d=new Date();   count=Math.floor((eventdate.getTime()-d.getTime())/1000);   if(count<=0)     {cl.days.value ="----";      cl.hours.value="--";      cl.mins.value="--";      cl.secs.value="--";      return;    }   cl.secs.value=toSt(count%60);   count=Math.floor(count/60);   cl.mins.value=toSt(count%60);   count=Math.floor(count/60);   cl.hours.value=toSt(count%24);   count=Math.floor(count/24);   cl.days.value=count;         setTimeout("countdown()",500);  }  

Hello, I've a similar assignment which involved creating a Javascript Countdown Clock. Here's the code I used. Plug the above code between the < script language="Javascript" >< /script > tags. Keep in mind that just having this javascript won't do much if you don't have the html to display the clock. I'll leave writing the html to you. Design the clock however you wish.

Answer by Uday Hiwarale for How to create a JQuery Clock / Timer

################## JQuery (use API) #################      $(document).ready(function(){           function getdate(){                  var today = new Date();              var h = today.getHours();              var m = today.getMinutes();              var s = today.getSeconds();               if(s<10){                   s = "0"+s;               }                $("h1").text(h+" : "+m+" : "+s);               setTimeout(function(){getdate()}, 500);              }            $("button").click(getdate);      });    ################## HTML ###################    
  

Answer by Kurt Van den Branden for How to create a JQuery Clock / Timer

A 24 hour clock:

setInterval(function(){            var currentTime = new Date();          var hours = currentTime.getHours();          var minutes = currentTime.getMinutes();          var seconds = currentTime.getSeconds();            // Add leading zeros          minutes = (minutes < 10 ? "0" : "") + minutes;          seconds = (seconds < 10 ? "0" : "") + seconds;          hours = (hours < 10 ? "0" : "") + hours;            // Compose the string for display          var currentTimeString = hours + ":" + minutes + ":" + seconds;          $(".clock").html(currentTimeString);    },1000);  

// 24 hour clock    setInterval(function() {      var currentTime = new Date();    var hours = currentTime.getHours();    var minutes = currentTime.getMinutes();    var seconds = currentTime.getSeconds();      // Add leading zeros    hours = (hours < 10 ? "0" : "") + hours;    minutes = (minutes < 10 ? "0" : "") + minutes;    seconds = (seconds < 10 ? "0" : "") + seconds;      // Compose the string for display    var currentTimeString = hours + ":" + minutes + ":" + seconds;    $(".clock").html(currentTimeString);    }, 1000);

Answer by Xdg for How to create a JQuery Clock / Timer

If you can use jQuery with Moment.js (great library), this is the way:

var crClockInit1 = null;  var crClockInterval = null;  function crInitClock() {      crClockInit1 = setInterval(function() {          if (moment().format("SSS") <= 40) {              clearInterval(crClockInit1);              crStartClockNow();          }      }, 30);  }    function crStartClockNow() {      crClockInterval = setInterval(function() {          $('#clock').html(moment().format('D. MMMM YYYY H:mm:ss'));      }, 1000);  }  

Start clock initialization with crInitClock(). It's done this way to synchronize seconds. Without synchronization, you would start 1 second timer in half of second and it will be half second late after real time.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72